一、axios 简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
1、从浏览器中创建 XMLHttpRequest
2、从 node.js 发出 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换JSON数据
8、客户端支持防止 CSRF/XSRF
二、下载安装
//npm安装
npm install axios --save
//cdn安装
<script type="text/javascript" src="axios.js"></script>
三、发送请求
<1>get 请求
axios.get('/list?id=1').then(function (res) {
console.log(res);
}).catch(function (error) {
console.log(error);
});
//以上请求也可以像如下方式写
axios.get('/user', {
params: {
id: 1
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
<2>post请求
axios.post('/list', {
username: 'tom',
password: '123456'
}).then(function (res) {
console.log(res);
}).catch(function (error) {
console.log(error);
});
<3>通用请求
axios({
url:"/list",
methodl:"get",
params:{
id:1
}
}).then((res)=>{
console.log(res)
}).catch((error)=>{
console.log(error)
})
<4>并发请求
function getHomeList() {
return axios.get('/list/1');
}
function getHomeData() {
return axios.get('/list/1');
}
axios.all([getHomeList(),getHomeData()])
.then(axios.spread(function (acct, perms) {
//两个请求现已完成
}));
三、请求方法别名
为了方便起见，已经为所有支持的请求方法提供了别名。
axios.request（config）
axios.get（url [，config]）
axios.delete（url [，config]）
axios.head（url [，config]）
axios.post（url [，data [，config]]）
axios.put（url [，data [，config]]）
axios.patch（url [，data [，config]]）
四、创建实例
//create创建一个新的实例对象
var instance = axios.create({
url: 'http://localhost:3000',
imeout: 3000,
method: 'post'
});
//即可调用方法，和axios实例同
instance.get('http://localhost:3000').then(res=>{
console.log(res);
});
五、默认配置
//全局默认配置
axios.defaults.baseURL = 'http://localhost:3000/';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['content-Type'] = 'appliction/x-www-form-urlencoded';
//自定义实例默认配置
//当创建实例的时候配置默认配置
var instance = axios.create({
baseURL: 'http://localhost:8080/'
});
//当实例创建时候修改配置
instance.defaults.headers.common["Authorization"] = AUTH_TOKEN;
六、拦截器
//添加一个请求拦截器
axios.interceptors.request.use(function(config){
//在请求发出之前进行一些操作
return config;
},function(err){
//Do something with request error
return Promise.reject(error);
});
//添加一个响应拦截器
axios.interceptors.response.use(function(res){
//在这里对返回的数据进行处理
return res;
},function(err){
return Promise.reject(error);
})
2.取消拦截器
var myInterceptor = axios.interceptor.request.use(function(){/*....*/});
axios.interceptors.request.eject(myInterceptor);
3.给自定义的axios实例添加拦截器
var instance = axios.create();
instance.interceptors.request.use(function(){})
七、封装axios
import axios from 'axios'
import qs from 'qs'
import store from 'store/index'
import router from '../router'
import { Indicator, Toast } from 'mint-ui'
axios.defaults.timeout = 100000 // 请求超时时间
axios.defaults.baseURL = process.env.VUE_APP_BASE_API
// axios.defaults.baseURL = 'http://119.3.219.52:8080/firework'
// axios.defaults.headers.post['Content-Type'] =
'application/x-www-form-urlencoded;charset=UTF-8' // post请求头的设置
// axios 请求拦截器
axios.interceptors.request.use(
config => {
// 可在此设置要发送的token
let token = store.getters['login/token'];
token && (config.headers.token = token)
Indicator.open('数据加载中')
return config
},
error => {
return Promise.error(error)
}
)
// axios respone拦截器
axios.interceptors.response.use(
response => {
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
// 否则的话抛出错误 结合自身业务和后台返回的接口状态约定写respone拦截器
Indicator.close()
if (response.status === 200 && response.data.code === 0) {
return Promise.resolve(response)
} else {
Toast({
message: response.data.msg,
position: 'middle',
duration: 2000
});
return Promise.reject(response)
}
},
error => {
Indicator.close()
const responseCode = error.response.status
switch (responseCode) {
// 401：未登录
case 401:
break
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
position: 'middle',
duration: 2000
});
break
default:
Toast({
message: error.response.data.message,
position: 'middle',
duration: 2000
});
}
return Promise.reject(error.response)
}
)
/**
* 封装get方法，对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
function get (url, params = {}) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
// 或者return axios.get();
}
/**
* post方法，对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
function post (url, params) {
return new Promise((resolve, reject) => {
axios
.post(url, qs.stringify(params))
.then(res => {
// console.log(res)
if(res.data.code==100){
store.commit('login/LOGOUT',{
$router:router,
})
}
resolve(res.data)
})
.catch(err => {
resolve(err.data)
})
})
// 或者return axios.post();
}
export { get, post }
如果感觉有帮助，请留下宝贵的赞，还可以赞赏一下！！！
