axios详解以及完整封装方法

const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});

{
  // 路径url
  url: '/user',
// 请求方法，默认get

method: 'get',
//基础url，最终请求的url是 baseURL+url拼接，所以再全局设置默认，可以使得发送请求时的url变得简洁

baseURL: 'https://some-domain.com/api/',
//设置请求头

headers: {'X-Requested-With': 'XMLHttpRequest'},
//设置请求url的query参数，可以使得url简洁。

//比如url是https://some-domain.com/api/user  然后params如下设置，那么最终的url是：

//https://some-domain.com/api/user?ID=12345&name=Jack

params: {

ID: 12345,

name:"Jack"

},
//设置请求体

data: {

firstName: 'Fred'

},
//设置请求的另外一种格式，不过这个是直接设置字符串的

data: 'Country=Brasil&City=Belo Horizonte',
//请求超时，单位毫秒，默认0，不超时。

timeout: 1000,
//响应数据类型，默认json

responseType: 'json',
//响应数据的编码规则，默认utf-8

responseEncoding: 'utf8',
//响应体的最大长度 

maxContentLength: 2000,
// 请求体的最大长度

maxBodyLength: 2000,
//设置响应状态码为多少时是成功，调用resolve，否则调用reject失败

//默认是大于等于200，小于300

validateStatus: function (status) {

return status >= 200 && status < 300;

},

axios.defaults.baseURL = 'https://api.example.com';

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

"""

自定义实例默认值

"""
// 创建实例时配置默认值

const instance = axios.create({

baseURL: 'https://api.example.com'

});
// 创建实例后修改默认值

instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

const instance = axios.create();

instance.interceptors.request.use(function () {/.../});

// 添加请求拦截器

axios.interceptors.request.use(function (config) {

// 在发送请求之前做些什么

return config;

}, function (error) {

// 对请求错误做些什么

return Promise.reject(error);

});

// 添加响应拦截器

axios.interceptors.response.use(function (response) {

// 2xx 范围内的状态码都会触发该函数。

// 对响应数据做点什么

return response;

}, function (error) {

// 超出 2xx 范围的状态码都会触发该函数。

// 对响应错误做点什么

return Promise.reject(error);

});

const myInterceptor = axios.interceptors.request.use(function () {/.../});

axios.interceptors.request.eject(myInterceptor);

const controller = new AbortController();

axios.get('/foo/bar', {

signal: controller.signal

}).then(function(response) {

//...

});

// 取消请求

controller.abort()

let source = axios.CancelToken.source();

axios.get('/users/12345',{

cancelToken: source.token

}).then(res=>{

console.log(res)

}).catch(err=>{

//取消请求后会执行该方法

console.log(err)

})
//取消请求，参数可选，该参数信息会发送到请求的catch中

source.cancel('取消后的信息');

const CancelToken = axios.CancelToken;

let cancel;

axios.get('/user/12345', {

cancelToken: new CancelToken(function executor(c) {

// executor 函数接收一个 cancel 函数作为参数

cancel = c;

})

});
// 取消请求

cancel();

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
// vant的toast提示框组件，大家可根据自己的ui组件更改。
import { Toast } from 'vant'; 

// => 环境的切换
if (process.env.NODE_ENV == 'development') {    
	axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') {    
	axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') {    
	axios.defaults.baseURL = 'https://www.production.com';
}

axios.defaults.timeout = 10000;

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

请求拦截
// 先导入vuex,因为我们要使用到里面的状态对象
// vuex的路径根据自己的路径去写
import store from '@/store/index';
// 请求拦截器axios.interceptors.request.use(

config => {

// 每次发送请求之前判断vuex中是否存在token

// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况

// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断

const token = store.state.token;

token && (config.headers.Authorization = token);

return config;

},

error => {

return Promise.error(error);

})

// 响应拦截器

axios.interceptors.response.use(

response => {

// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据

// 否则的话抛出错误

if (response.status === 200) {

return Promise.resolve(response);

} else {

return Promise.reject(response);

}

},

// 服务器状态码不是2开头的的情况

// 这里可以跟你们的后台开发人员协商好统一的错误状态码

// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等

// 下面列举几个常见的操作，其他需求可自行扩展

error => {

if (error.response.status) {

switch (error.response.status) {

// 401: 未登录

// 未登录则跳转登录页面，并携带当前页面的路径

// 在登录成功后返回当前页面，这一步需要在登录页操作。

case 401:

router.replace({

path: '/login',

query: {

redirect: router.currentRoute.fullPath

}

});

break;

        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面                
        case 403:
             Toast({
                message: '登录过期，请重新登录',
                duration: 1000,
                forbidClick: true
            });
            // 清除token
            localStorage.removeItem('token');
            store.commit('loginSuccess', null);
            // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
            setTimeout(() => {                        
                router.replace({                            
                    path: '/login',                            
                    query: { 
                        redirect: router.currentRoute.fullPath 
                    }                        
                });                    
            }, 1000);                    
            break; 

        // 404请求不存在
        case 404:
            Toast({
                message: '网络请求不存在',
                duration: 1500,
                forbidClick: true
            });
            break;
        // 其他错误，直接抛出错误提示
        default:
            Toast({
                message: error.response.data.message,
                duration: 1500,
                forbidClick: true
            });
    }
    return Promise.reject(error.response);
}

}

});

/**


get方法，对应get请求
@param {String} url [请求的url地址]
@param {Object} params [请求时携带的参数]

/

export function get(url, params){

return new Promise((resolve, reject) =>{

axios.get(url, {

params: params

}).then(res => {

resolve(res.data);

}).catch(err =>{

reject(err.data)

})

});}

/*
post方法，对应post请求
@param {String} url [请求的url地址]
@param {Object} params [请求时携带的参数]

/

export function post(url, params) {

return new Promise((resolve, reject) => {

axios.post(url, QS.stringify(params))

.then(res => {

resolve(res.data);

})

.catch(err =>{

reject(err.data)

})

});

}

/*
api接口统一管理

*/

import { get, post } from './http'

现在，例如我们有这样一个接口，是一个post请求：

http://www.baiodu.com/api/v1/users/my_address/address_edit_before

我们可以在api.js中这样封装：
export const apiAddress = p => post('api/v1/users/my_address/address_edit_before', p);

我们定义了一个apiAddress方法，这个方法有一个参数p，p是我们请求接口时携带的参数对象。而后调用了我们封装的post方法，post方法的第一个参数是我们的接口地址，第二个参数是apiAddress的p参数，即请求接口时携带的参数对象。最后通过export导出apiAddress。
然后在我们的页面中可以这样调用我们的api接口：
import { apiAddress } from '@/request/api';// 导入我们的api接口

export default {

name: 'Address',

created () {

this.onLoad();

},

methods: {

// 获取数据

onLoad() {

// 调用api接口，并且提供了两个参数

apiAddress({

type: 0,

sort: 1

}).then(res => {

// 获取数据成功后的其他操作

………………

})

}

}

}

/**axios封装


请求拦截、相应拦截、错误统一处理

*/

import axios from 'axios';import QS from 'qs';

import { Toast } from 'vant';

import store from '../store/index'

// 环境的切换

if (process.env.NODE_ENV == 'development') {

axios.defaults.baseURL = '/api';

} else if (process.env.NODE_ENV == 'debug') {

axios.defaults.baseURL = '';

} else if (process.env.NODE_ENV == 'production') {

axios.defaults.baseURL = 'http://api.123dailu.com/';

}
// 请求超时时间

axios.defaults.timeout = 10000;
// post请求头

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 请求拦截器

axios.interceptors.request.use(

config => {

// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了

// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断

const token = store.state.token;

token && (config.headers.Authorization = token);

return config;

},

error => {

return Promise.error(error);

})
// 响应拦截器

axios.interceptors.response.use(

response => {

if (response.status === 200) {

return Promise.resolve(response);

} else {

return Promise.reject(response);

}

},

// 服务器状态码不是200的情况

error => {

if (error.response.status) {

switch (error.response.status) {

// 401: 未登录

// 未登录则跳转登录页面，并携带当前页面的路径

// 在登录成功后返回当前页面，这一步需要在登录页操作。

case 401:

router.replace({

path: '/login',

query: { redirect: router.currentRoute.fullPath }

});

break;

// 403 token过期

// 登录过期对用户进行提示

// 清除本地token和清空vuex中token对象

// 跳转登录页面

case 403:

Toast({

message: '登录过期，请重新登录',

duration: 1000,

forbidClick: true

});

// 清除token

localStorage.removeItem('token');

store.commit('loginSuccess', null);

// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面

setTimeout(() => {

router.replace({

path: '/login',

query: {

redirect: router.currentRoute.fullPath

}

});

}, 1000);

break;

// 404请求不存在

case 404:

Toast({

message: '网络请求不存在',

duration: 1500,

forbidClick: true

});

break;

// 其他错误，直接抛出错误提示

default:

Toast({

message: error.response.data.message,

duration: 1500,

forbidClick: true

});

}

return Promise.reject(error.response);

}

}

);

/**

get方法，对应get请求
@param {String} url [请求的url地址]
@param {Object} params [请求时携带的参数]

/

export function get(url, params){

return new Promise((resolve, reject) =>{

axios.get(url, {

params: params

})

.then(res => {

resolve(res.data);

})

.catch(err => {

reject(err.data)

})

});

}

/*
post方法，对应post请求
@param {String} url [请求的url地址]
@param {Object} params [请求时携带的参数]

/

export function post(url, params) {

return new Promise((resolve, reject) => {

axios.post(url, QS.stringify(params))

.then(res => {

resolve(res.data);

})

.catch(err => {

reject(err.data)

})

});

}

/*
axios封装
请求拦截、响应拦截、错误统一处理

*/

import axios from 'axios';

import router from '../router';

import store from '../store/index';

import { Toast } from 'vant';

/**

提示函数
禁止点击蒙层、显示一秒后关闭

*/

const tip = msg => {

Toast({

message: msg,

duration: 1000,

forbidClick: true

});

}

/**

跳转登录页
携带当前页面路由，以期在登录页面完成登录后返回当前页面

*/

const toLogin = () => {

router.replace({

path: '/login',

query: {

redirect: router.currentRoute.fullPath

}

});

}

/**

请求失败后的错误统一处理
@param {Number} status 请求失败的状态码

*/

const errorHandle = (status, other) => {

// 状态码判断

switch (status) {

// 401: 未登录状态，跳转登录页

case 401:

toLogin();

break;

// 403 token过期

// 清除token并跳转登录页

case 403:

tip('登录过期，请重新登录');

localStorage.removeItem('token');

store.commit('loginSuccess', null);

setTimeout(() => {

toLogin();

}, 1000);

break;

// 404请求不存在

case 404:

tip('请求的资源不存在');

break;

default:

console.log(other);

}}

// 创建axios实例

var instance = axios.create({    timeout: 1000 * 12});

// 设置post请求头

instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

/**

请求拦截器
每次请求前，如果存在token则在请求头中携带token

*/

instance.interceptors.request.use(

config => {

// 登录流程控制中，根据本地是否存在token判断用户的登录情况

// 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token

// 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码

// 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。

const token = store.state.token;

token && (config.headers.Authorization = token);

return config;

},

error => Promise.error(error))

// 响应拦截器

instance.interceptors.response.use(

// 请求成功

res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),

// 请求失败

error => {

const { response } = error;

if (response) {

// 请求已发出，但是不在2xx的范围

errorHandle(response.status, response.data.message);

return Promise.reject(response);

} else {

// 处理断网的情况

// eg:请求超时或断网时，更新state的network状态

// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏

// 关于断网组件中的刷新重新获取数据，会在断网组件中说明

if (!window.navigator.onLine) {

store.commit('changeNetwork', false);

} else {

return Promise.reject(error);

}

}

});
export default instance;

/**


api接口的统一出口

*/

// 文章模块接口

import article from '@/api/article';

// 其他模块的接口……

// 导出接口

export default {

article,

// ……

}

index.js是一个api接口的出口，这样就可以把api接口根据功能划分为多个模块，利于多人协作开发，比如一个人只负责一个模块的开发等，还能方便每个模块中接口的命名哦。
base.js:
/**

接口域名的管理

*/

const base = {

sq: 'https://xxxx111111.com/api/v1',

bd: 'http://xxxxx22222.com/api'

}

export default base;

通过base.js来管理我们的接口域名，不管有多少个都可以通过这里进行接口的定义。即使修改起来，也是很方便的。
最后就是接口模块的说明，例如上面的article.js:
/**

article模块接口列表

*/

import base from './base'; // 导入接口域名列表

import axios from '@/utils/http'; // 导入http中创建的axios实例

import qs from 'qs'; // 根据需求是否导入qs模块
const article = {

// 新闻列表

articleList () {

return axios.get(${base.sq}/topics);

},

// 新闻详情,演示

articleDetail (id, params) {

return axios.get(${base.sq}/topic/${id}, {

params: params

});

},

// post提交

login (params) {

return axios.post(${base.sq}/accesstoken, qs.stringify(params));

}

// 其他接口…………

}
export default article;

import Vue from 'vue'

import App from './App'

import router from './router' // 导入路由文件

import store from './store' // 导入vuex文件

import api from './api' // 导入api接口

Vue.prototype.$api = api; // 将api挂载到vue的原型上

然后我们可以在页面中这样调用接口，eg：
methods: {

onLoad(id) {

this.$api.article.articleDetail(id, {

api: 123

}).then(res=> {

// 执行某些操作

})

}

}

// refresh.vue

beforeRouteEnter (to, from, next) {

next(vm => {

vm.$router.replace(from.fullPath)

})

}