Vue项目使用axios相关解说

介绍

Axios 是一个基于 promise 的 HTTP 库&＃xff0c;可以用在浏览器和 node.js 中。
点击看这个吧

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

get请求

axios.get(&＃39;/user&＃39;, {params: {ID: 1111}})
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});// 还可以这么写&＃xff0c;es7新特性async/await
async function getUser() {try {const response &＃61; await axios.get(&＃39;/user?ID&＃61;1111&＃39;);console.log(response);} catch (error) {console.error(error);}
}*async用于声明一个函数是异步的&＃xff0c;而await是“等待”的意思&＃xff0c;就是用于等待异步完成。
await只能在async函数中使用。
await可以让js进行等待&＃xff0c;直到一个promise执行并返回它的结果&＃xff0c;js才会继续往下执行。
async/await 面试经常问到哦&＃xff0c;百度查一下&＃xff0c;划重点


post请求

axios.post(&＃39;/user&＃39;, {firstName: &＃39;xiliDong&＃39;,lastName: &＃39;dongxili&＃39;})
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});
//或者这样写
axios({method: &＃39;post&＃39;,url: &＃39;/user&＃39;,data: {firstName: &＃39;xiliDong&＃39;,lastName: &＃39;dongxili&＃39;}
});


执行多个并发请求

function getUserAccount() {return axios.get(&＃39;/user/12345&＃39;);
}
function getUserPermissions() {return axios.get(&＃39;/user/12345/permissions&＃39;);
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {// 两个请求现在都执行完成
}));


创建实例&＃xff08;重点&＃xff09;

可以使用自定义配置新建一个 axios 实例

axios.create([config])


var instance &＃61; axios.create({baseURL: &＃39;请求地址前缀&＃39;,timeout: 1000,headers: {&＃39;X-Custom-Header&＃39;: &＃39;foobar&＃39;}
});


响应结构&＃xff1a;

{data: {}, // data由服务器提供的响应status: 200, // 服务器响应的 HTTP 状态码statusText: &＃39;OK&＃39;, // 服务器响应的 HTTP 状态信息headers: {}, // 服务器响应的头config: {} // 为请求提供的配置信息
}使用 then 时&＃xff0c;你将接收下面这样的响应&＃xff1a;
axios.get(&＃39;/user/1111&＃39;).then(function(response) {console.log(response.data);console.log(response.status);console.log(response.statusText);console.log(response.headers);console.log(response.config);});


指定配置的默认值&＃xff1a;

axios.defaults.baseURL &＃61; &＃39;https://api.example.com&＃39;;
axios.defaults.headers.common[&＃39;Authorization&＃39;] &＃61; AUTH_TOKEN;
axios.defaults.headers.post[&＃39;Content-Type&＃39;] &＃61; &＃39;application/x-www-form-urlencoded&＃39;;


自定义实例默认值:

// 创建实例时设置配置的默认值
var instance &＃61; axios.create({baseURL: &＃39;https://api.example.com&＃39;
});
// 在实例已创建后修改默认值
instance.defaults.headers.common[&＃39;Authorization&＃39;] &＃61; AUTH_TOKEN;


拦截器&＃xff1a;

// request拦截器
import axios from &＃39;axios&＃39;
import router from &＃39;../router&＃39;
// 创建axios实例
const service &＃61; axios.create({timeout: null // 请求超时时间
})
let serviceTips &＃61; &＃39;服务器超时&＃39;// request拦截器
service.interceptors.request.use(config &＃61;> {// console.log(service.interceptors)// 获取本地tokenlet token &＃61; localStorage.getItem(&＃39;tokendata&＃39;)// 设置请求头let headers &＃61; &＃39;application/json&＃39;// 是否携带tokenlet tokenFlag &＃61; true// 是否修改请求信息if (config.opts) {// 获取携带token状态tokenFlag &＃61; config.opts ? config.opts.token : true// 获取请求头headers &＃61; config.opts.Header ? config.opts.Header : &＃39;application/json&＃39;// 拓展头部参数let Head &＃61; config.opts.Headif (Head) {for (let key in Head) {config.headers[key] &＃61; Head[key]}}}// 暂时不加入token验证// if (token && tokenFlag) {// // 条件允许&＃xff0c;携带token请求// config.headers[&＃39;JSESSIONID&＃39;] &＃61; token// // config.headers[&＃39;X-Auth0-Token&＃39;] &＃61; token// } else {// headers &＃61; &＃39;application/x-www-form-urlencoded&＃39;// }// 设置请求格式config.headers[&＃39;Content-Type&＃39;] &＃61; headersreturn config},err &＃61;> {return Promise.reject(err)}
)// http response 服务器响应拦截器
service.interceptors.response.use(response &＃61;> {return response},error &＃61;> {if (error.response) {switch (error.response.status) {case 401:error.response.data &＃61; &＃39;登陆超时&＃xff0c;重新登陆&＃39;router.replace({path: &＃39;/login&＃39;,query: {redirect: router.currentRoute.fullPath} // 登录成功后跳入浏览的当前页面})breakcase 404:error.response.data &＃61; &＃39;资源不存在&＃39;breakcase 406:error.response.data &＃61; &＃39;头部无携带token&＃39;breakcase 412:// 拦截错误 并重新跳入登页重新获取tokenrouter.replace({path: &＃39;/login&＃39;,query: {redirect: router.currentRoute.fullPath} // 登录成功后跳入浏览的当前页面})error.response.data &＃61; &＃39;秘钥失效&＃39;localStorage.removeItem(&＃39;tokendata&＃39;) // 清除tokenbreakcase 415:error.response.data &＃61; &＃39;请求type有误&＃39;breakcase 500:error.response.data &＃61; &＃39;服务器异常&＃39;break}serviceTips &＃61; error.response.data}Message.error(serviceTips)return Promise.reject(serviceTips)}
)
export default service


配置好后使用&＃xff1a;

在api.js中引入拦截器&＃xff1a;
import fetch from &＃39;&＃64;/utils/fetch&＃39; // 拦截器
export function getList(obj) {const data &＃61; objreturn fetch({url: &＃39;&＃39;,method: &＃39;POST&＃39;,data})
}--------------------------------
可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。
export function getList(obj) {const data &＃61; objreturn fetch({url: &＃39;&＃39;,method: &＃39;POST&＃39;,validateStatus: function(status) {// return status >&＃61; 200 && status <300; // 默认的return status < 500; // 状态码在大于或等于500时才会 reject},data})
}


重点

axios的请求头默认为&＃39;application/json&＃39;&＃xff0c;
即axios会默认序列化 Javascript 对象为 JSON.
如果想使用 application/x-www-form-urlencoded 格式&＃xff0c;你可以使用下面的配置:
import Qs from &＃39;qs&＃39;export function getList(obj) {const data &＃61; Qs.stringify(obj)return fetch({url: &＃39;&＃39;,method: &＃39;POST&＃39;,headers: {&＃39;content-type&＃39;: &＃39;application/x-www-form-urlencoded&＃39;,// 如果需要XMLHttpRequest&＃xff0c;加入这个&＃39;X-Requested-With&＃39;: &＃39;XMLHttpRequest&＃39;},data})
}


单页面使用

import {getList} from &＃39;&＃64;/api/base.js&＃39;
// param为前端传入的参数
getList(param).then(res &＃61;> {if (res.data.code &＃61;&＃61;&＃61; 0) {//获取成功业务代码} else {this.$message({message: &＃96;[${res.data.msg}]:查询失败&＃96;,type: "error"});}
})
.catch(() &＃61;> {})


移除拦截器

var 拦截器 &＃61; axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(拦截器);


取消请求

可以使用 CancelToken.source 工厂方法创建 cancel token

var CancelToken &＃61; axios.CancelToken;
var source &＃61; CancelToken.source();axios.get(&＃39;/user/1111&＃39;, {cancelToken: source.token
}).catch(function(thrown) {if (axios.isCancel(thrown)) {console.log(&＃39;Request canceled&＃39;, thrown.message);} else {// 处理错误}
});// 取消请求&＃xff08;message 参数是可选的&＃xff09;
source.cancel(&＃39;Operation canceled by the user.&＃39;);


还可以通过传递一个 executor 函数到 CancelToken
的构造函数来创建 cancel token&＃xff1a;

var CancelToken &＃61; axios.CancelToken;
var cancel;axios.get(&＃39;/user/12345&＃39;, {cancelToken: new CancelToken(function executor(c) {// executor 函数接收一个 cancel 函数作为参数cancel &＃61; c;})
});// 取消请求
cancel();注意&＃xff0c;还可以使用同一个 cancel token 取消多个请求


点击前往参考地址