axios 安装
cnpm install axios -S
nprogress 安装
cnpm install nprogress -S
封装axios
import axios from 'axios'
import Nprogress from 'nprogress' //引入头部加载状态条
import {
messages
} from '@/assets/js/public' //引入封装好的提示框
//自定义axios配置 新建一个axios实例
const service = axios.create({
baseURL: '/',
timeout: 10000 //设置接口超时时间
})
//给post请求添加请求头配置 （以下配置2选1）
//如果后端接收的是json数据类型，post 的 headers 需要设置 { ‘content-type’: ’application/json’ }，传给后端的数据就形如 { ‘name’:‘year’, ‘age’:’27’ }
service.defaults.headers.post["Content-Type"] = 'application/json' //该配置可以省略 axios默认post请求头配置就是json数据格式
//如果后端接收的是（表单）字符串类型， { ‘content-type’: ’application/x-www-form-urlencoded’ }，传输给后端的数据就形如 ‘name=year&age=27’
service.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded;charset=UTF-8";
/*
*请求前拦截
*用于处理需要请求前的操作
*/
service.interceptors.request.use(config => {
Nprogress.start()
return config;
}),
error => {
Nprogress.done()
return Promise.reject(error)
}
/*
*请求相应拦截
*用于处理需要请求前的操作
*/
service.interceptors.response.use(response => {
return new Promise((resolve, reject) => {
Nprogress.done()
let res = response.data;
resolve(res)
})
},
error => {
Nprogress.done()
//断网处理或者请求超时
if (!error.response) {
//请求超时
if (error.message.includes("timeout")) {
messages('error', '请求超时,请检查互联网连接')
} else {
//断网了
messages('error', '请检查网络是否已连接')
}
return;
}
const status = error.response.status;
switch (status) {
case 500:
messages('error', '操作失败');
break;
case 404:
messages('error', '未找到远程服务器');
break;
default:
messages('error', '请求失败')
}
return Promise.reject(error);
}
)
/*
*get方法，对应get请求
*@param {String} url [请求的url地址]
*@param {Object} params [请求时候携带的参数]
*/
export function get(url, params, config) {
return service.get(url, {
params
}, config)
}
/*
*post方法，对应post请求
*@param {String} url [请求的url地址]
*@param {Object} params [请求时候携带的参数]
*/
export function post(url, params, config) {
return service.post(url, {
params
}, config)
}
/*
* delete
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function delete(url, params) {
return service.delete(url, params)
}
/*
*put方法，对应put请求
*@param {String} url [请求的url地址]
*@param {Object} params [请求时候携带的参数]
*/
export function put(url, params) {
return service.put(url, params)
}
参考：post请求头参考https://www.cnblogs.com/edwardwzw/p/11694903.html
