axios简介
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
axios是我们在vue项目中常见封装http请求相对受欢迎的，优点如下：
简单易用，api接近于jquery，比原生的fetch之类的简单，
浏览器兼容性好，都能兼容IE7，使用fetch就得自己处理兼容
通用性好，能在node和浏览器中使用
api一致 稳定大牌，vue官网文档有推荐
以上几点呢，是大多数公司选择使用axios的主要原因，通过简单的了解我们应该知道axios是干嘛的了，请求这里指的是数据的传输，web端http属于单向的，你问了他就告诉你，服务端不会主动告诉你，这个就叫http请求，因为有协议的原因，所以这里很多人还是不能熟练掌握，具体请求具体传参，所以我准备专门介绍一下，各请求之间我是如何判断该何如传参的：
先说一下request 他是一个任意类型的请求，你在mehod: ‘请求别名’ 比如：get post 都可以
get 向指定资源请求数据，一般用来获取，查询资源信息，较不安全，幂等（幂等是对同一URL的多个请求应该返回同样的结果）的，只用来获取数据不会修改数据，其请求显示在url上，会被缓存，对请求长度有限制。和post是常用的提交方式。
delete 请求服务器器删除Request-URI所标识的资源。
head是需要向服务器索要与get一样的请求，但是不返回返回体，这个方法可以在不必传输整个响应内容的情况下，获取包含在响应消息头中的元信息。
option返回给服务器针对特定资源所支持的请求方式，也可以利用向web服务器发送‘*’的请求来测试服务器的功能性。
post 向指定资源提交数据进行请求处理，一般用来更新资源信息，非幂等，请求显示在请求体里面，不会被缓存，对请求长度无限制。
put 向指定资源上传最新的内容
patch方法用来更新部分资源，然而PATCH和POST都是非幂等的，POST请求服务器执行一个动作，多次请求会多次执行。PATCH提供的实体则需要根据程序或其它协议的定义，解析后在服务器上执行，以此来修改服务器上的数据。也就是说，PATCH请求是会执行某个程序的，如果重复提交，程序可能执行多次，对服务器上的资源就可能造成额外的影响POST方法和PATCH方法它们的实体部分都是结构化的数据，所以PAtch也是非幂等的。POST方法的实体结构一般是 multipart/form-data或 application/x-www-form-urlencoded而PATCH方法的实体结构则随其它规范定义。这和PUT方法的无结构实体相比就是最大的区别。axios 默认配置
axios.defaults.baseURL="http://localhost:8888/";
axios.defaults.timeout=4000;axios get请求
//get请求方式一：
axios({
// 默认请求方式为get
method: 'get',
url: 'api',
// 传递参数
params: {
key: value
},
// 设置请求头信息
headers: {
key: value
}
responseType: 'json'
}).then((response) => {
// 请求成功
let res = response.data;
console.log(res);
}).catch((error) => {
// 请求失败，
console.log(error);
});
//get请求方式二：
axios.get("api", {
// 传递参数
params: {
key: value
},
// 设置请求头信息，可以传递空值
headers: {
key: value
}
}).then((response) => {
// 请求成功
let res = response.data;
console.log(res);
}).catch(error => {
// 请求失败，
console.log(error);
});axios post请求
//post普通方式：
axios({
method: 'post',
url: 'api',
// 传递参数
data,
// 设置请求头信息
headers: {
key: value
},
responseType: 'json'
}).then((response )=> {
// 请求成功
let res = response.data;
console.log(res);
}).catch(error => {
// 请求失败，
console.log(error);
});
//post别名的方式：---注意post传参的key是data，get的是params
let headers = {
TOKEN: ""
};
axios.post("api", data, {headers}}).then((response) => {
// 请求成功
let res = response.data;
console.log(res);
}).catch((error) => {
// 请求失败，
console.log(error);
});axios发送并发请求
//方法一：请求成功时响应的是一个数组
axios.all([
axios.get('http://localhost:8888/info'),
axios.get('http://localhost:8888/infos')
]).then((res) => {
console.log(res[0]); //第一个axios请求得到的
console.log(res[1]); //第二个axios请求得到的
}).catch((err) => {
console.log(err);
})
//采用axios提供的spread函数处理响应数组结果
axios.all([
axios.get('http://localhost:8888/info'),
axios.get('http://localhost:8888/infos')
]).then(axios.spread((res1,res2) =>{
console.log(res1); //第一个axios请求得到的
console.log(res2); //第二个axios请求得到的
})).catch((err) => {
console.log(err);
})axios 封装
例一：
// 对axios的一次封装
import axio from 'axios'
import store from '../store'
import { removeItem } from '../utils/localStorage'
import { Toast } from 'vant'
import router from '@/router'
Toast.setDefaultOptions({ forbidClick: true })
const axios = axio.create({
baseURL: 'http://123.60.80.68:8100/',
// baseURL: 'http://192.168.0.231:8080/',
timeout: 30000
})
// 请求拦截器，实现token的统一添加；
axios.interceptors.request.use(
config => {
if (store.state.token) {
config.headers.accessToken = store.state.token
}
return config
}, err => {
return Promise.reject(err)
})
axios.interceptors.response.use(
response => {
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
return Promise.resolve(response.data)
} else {
return Promise.reject(new Error(res.message || 'Error'))
}
},
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
// 下面列举几个常见的操作，其他需求可自行扩展
error => {
if (error.response.data.status) {
switch (error.response.data.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
router.replace({
path: '/login'
})
break
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 6001:
Toast({
message: '登录过期，请重新登录',
duration: 1000,
forbidClick: true
})
// 清除token
removeItem('user')
store.commit('setUser', null)
store.commit('setToken', '')
// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login'
})
}, 1000)
break
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
})
break
// 其他错误，直接抛出错误提示
default:
Toast({
message: error.response.data.message,
duration: 1000,
forbidClick: true
})
}
}
return Promise.reject(error.response.data.message)
})
export default axios例二：
import axios from 'axios'
let baseURL;
if(process.env.NODE_ENV === 'development') {
baseURL = 'xxx本地环境xxx';
} else if(process.env.NODE_ENV === 'production') {
baseURL = 'xxx生产环境xxx';
}
// 实例
let instance = axios.create({
baseURL: baseURL,
...
})
//设置axios拦截器: 请求拦截器
axios_instance.interceptors.request.use(config => {
//得到请求方式和请求体数据
const {method,data} = config;
if(method.toLowerCase() == 'post' && typeof data == 'object'){
config.data = qs.stringify(data)
}
config.headers['X-Token'] = getToken()
return config;
}, err => {
// 请求未成功发出，如：没有网络...
return Promise.reject(err)
})
//设置axios拦截器: 响应拦截器
axios_instance.interceptors.response.use(res => {
// 成功响应的拦截
const data = res.data;
const code = data.code;
if(code == 200 ){
return data;
}else{
return Promise.reject(data);
}
}, err =>{
//请求的地址错误 会进入这里
console.log(err)
return Promise.reject(err)
})
//接口的封装
import request from './requst'
/* 登录 */
export function login (data) {
return request({
url: '/login_auth/login',
method: 'get',
params: data
})
}
使用请求别名：
// 获取用户信息
export function getInfo () {
return request.get('/system/user/getLoginUser')
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
