基本使用
安装
// 项目中安装npm install axios --S// cdn 引入<script src="/axios/dist/axios.min.js"></script>
导入
import axios from 'axios'
发送请求
axios({url:'xxx', // 设置请求的地址method:"GET", // 设置请求方法params:{// get请求使用params进行参数凭借,如果是post请求用datatype: '',page: 1}}).then(res => {// res为后端返回的数据console.log(res); })
并发请求axios.all([])
function getUserAccount() {return axios.get('/user/12345');}function getUserPermissions() {return axios.get('/user/12345/permissions');}axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (res1, res2) {// res1第一个请求的返回的内容，res2第二个请求返回的内容// 两个请求都执行完成才会执行}));
在项目中使用以及位置
在项目中封装
axios文件
import axios from 'axios';import config from './config';import Cookies from "js-cookie";import router from '@/router'// 使用vuex做全局loading时使用// import store from '@/store'export default function $axios(options) {return new Promise((resolve, reject) => {const instance = axios.create({baseURL: config.baseUrl,headers: config.headers,timeout: config.timeout,withCredentials: config.withCredentials})// request 拦截器instance.interceptors.request.use(config => {let token = Cookies.get('token')// 1. 请求开始的时候可以结合 vuex 开启全屏 loading 动画// console.log(store.state.loading)// console.log('准备发送请求...')// 2. 带上tokenif (token) {config.headers.token = token} else {// 重定向到登录页面router.push('/login')}// 3. 根据请求方法，序列化传来的参数，根据后端需求是否序列化if (config.method === 'post') {// if (config.data.__proto__ === FormData.prototype// || config.url.endsWith('path')// || config.url.endsWith('mark')// || config.url.endsWith('patchs')// ) {// } else {// config.data = qs.stringify(config.data)// }}return config},error => {// 请求错误时console.log('request:', error)// 1. 判断请求超时if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {console.log('timeout请求超时')// return service.request(originalRequest);// 再重复请求一次}// 2. 需要重定向到错误页面const errorInfo = error.responseconsole.log(errorInfo)if (errorInfo) {error = errorInfo.data // 页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.rejectconst errorStatus = errorInfo.status; // 404 403 500 ...router.push({path: `/error/${errorStatus}`})}return Promise.reject(error) // 在调用的那边可以拿到(catch)你想返回的错误信息})// response 拦截器instance.interceptors.response.use(response => {let data;// IE9时response.data是undefined，因此需要使用response.request.responseText(Stringify后的字符串)if (response.data == undefined) {data = JSON.parse(response.request.responseText)} else {data = response.data}if(data.code == 401){//登录失效Cookies.remove('token')router.push({path: `/login`})}// 根据返回的code值来做不同的处理switch (data.rc) {case 1:console.log(data.desc)break;case 0:mit('changeState')// console.log('登录成功')default:}// 若不是正确的返回code，且已经登录，就抛出错误// const err = new Error(data.desc)// err.data = data// err.response = response// throw errreturn data},err => {if (err && err.response) {switch (err.response.status) {case 400:err.message = '请求错误'breakcase 401:err.message = '未授权，请登录'breakcase 403:err.message = '拒绝访问'breakcase 404:err.message = `请求地址出错: ${err.response.config.url}`breakcase 408:err.message = '请求超时'breakcase 500:err.message = '服务器内部错误'breakcase 501:err.message = '服务未实现'breakcase 502:err.message = '网关错误'breakcase 503:err.message = '服务不可用'breakcase 504:err.message = '网关超时'breakcase 505:err.message = 'HTTP版本不受支持'breakdefault:}}console.error(err)return Promise.reject(err) // 返回接口返回的错误信息})// 请求处理instance(options).then(res => {resolve(res)return false}).catch(error => {reject(error)})})}
config.js文件
//global.js 后台地址import {baseUrl } from '@/utils/global'export default {method: 'get',// 基础url前缀baseUrl: baseUrl,// 请求头信息headers: {'Content-Type': 'application/json;charset=UTF-8'},// 参数data: {},// 设置超时时间timeout: 100000,// 携带凭证withCredentials: true,// 返回数据类型responseType: 'json'}
api.js文件
/** 接口统一集成模块*/import * as Intro from "./moudules/Intro";import * as login from "./moudules/login";import * as user from "./moudules/user";import * as dept from "./moudules/dept";import * as role from "./moudules/role";import * as menu from "./moudules/menu";import * as dict from "./moudules/dict";import * as log from "./moudules/log";import * as NumberManagement from "./moudules/NumberManagement";import * as ax from "./moudules/ax";import * as axg from "./moudules/axg";// 默认全部导出export default {Intro,login,user,dept,role,menu,dict,log,NumberManagement,ax,axg,};
index.js文件
导入所有接口并且挂载到原型上
// 导入所有接口import api from './api'const install = Vue => {if (install.installed)return;install.installed = true;Object.defineProperties(Vue.prototype, {// 注意，此处挂载在 Vue 原型的 $api 对象上$api: {get() {return api}}})}export default install
在moudules里面创建一个axg.js文件
//axg 文件内容如下import axios from '../axios'/** 产品管理/AXG模式*/// 分页查询export const findPage = (data) => {return axios({url: '/base/productAxg/findPage',method: 'post',data})}// 新增保存export const save = (data) => {return axios({url: '/base/productAxg/save',method: 'post',data})}// 删除export const deleteProductAxg = (data) => {return axios({url: '/base/productAxg/deleteProductAxg',method: 'post',data})}
在产品管理/AXG模式页面中使用
data() {return {pageRequest: {pageNum: 1,pageSize: 10,param: {},},params: {productShortName: null,}}}methods: {// 获取分页数据findPage() {this.pageRequest.param = this.params;this.$refs.kttable.loading = true;//调用api里面的axg模块的findPage()方法并传参去掉接口this.$api.axg.findPage(this.pageRequest).then((res) => {this.pageResult = res.data;this.$refs.kttable.loading = false;})},}// 生命周期 - 创建完成（可以访问当前this实例）created() {this.findPage()},
以上只是我自己在项目中用到的如果没有满足可以参考其他文献
参考一
