前端必懂!Axios!

本文主要是介绍前端必懂!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)   // 返回接口返回的错误信息});