本文主要是介绍前端必懂!Axios!，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
安装
npm i axios vue-axios -S(可以加上--save-exact作为精确版本安装)
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
// 设置通用的请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
提供的API
request(config)
get(url, config)
delete(url, config)
head(url, config)
options(url, config)
post(url, data, config)
put(url, data, config)
patch(url, data, config)
// 同时调用两个接口
all()
axios()
axios({url: 'url',method: 'get', // 'post'// 'get'使用paramsparams: {key: val},// 'post'使用datadata: {key: val},headers: {key: val}}).then(res => {}).catch(err => {})
get()
axios.get('url', {// 传参params: {key: value},// 请求头headers: {key: value}}).then(res => {}).catch(err => {})
post()
axios.post('url', {// 传参key: value}, { // 请求头headers: {key: value}}).then(res => {}).catch(err => {})
request 拦截器
axios.interceptors.request.use(config => {if (store.state.token) { // 判断是否存在token，如果存在的话，则每个http header都加上tokenconfig.headers.Authorization = `token ${store.state.token}`;}return config;},err => {// 请求失败的统一处理return Promise.reject(err);});
response 拦截器
axios.interceptors.response.use(response => {// 配置return response;},error => {if (error.response) {switch (error.response.status) {case 401:// 判断状态码进行处理}}return Promise.reject(error.response.data) // 返回接口返回的错误信息});
这篇关于前端必懂!Axios!的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
