Axios的基本使用
get,获取数据
post,提交数据(表单提交以及文件上传)
put,更新数据 (提交所有的数据)
patch,提交数据 (提交修改的数据)
delete,删除数据
axios({
method: 'get',
url: '',
params: {}
}).then(res => { do something })
并发请求
同时进行多个请求,并统一处理返回值,如果在某些场景中我们需要同时依赖两个接口返回的数据,那么我们可以使用并发请求。
axios.all([ // 这里的参数是一个数组,里面包含了axios请求
axios.get('url1'), // 请求的先后顺序就是代码中的顺序
axios.get('url2')
]).then(
axios.spread((res1, res2) => { // spread用来分割返回值
console.log(res1, res2)
}
)
为了应对多个服务器的ip地址,应该实例化axios
创建axios实例
const instance = axios.create({
baseURL: 'http://152.136.185.210:7878/api/m5',
timeout: 5000
})
axios配置
全局配置,例如axios.defaults.timeout = 1000
实例配置, 在创建axios实例时传入的配置,如果不传实例配置就会使用全局配置
请求配置,在使用axios请求时,可以单独传入新的配置
这三种配置的优先级为:请求配置 > 实例配置 > 全局配置
拦截器
请求拦截器:
axios.interceptors.request.use(
config => {}, // 在发送请求前的一些处理逻辑
err => {} // 在请求错误后的处理
)
响应拦截器:
axios.interceptors.response.use(
res => { return res }, // 请求成功后对响应数据做一定的处理
err => { return Promis.reject(err)} // 在响应错误后的处理,可以用catch捕捉
)
封装axios请求
request.js
import axios from 'axios'
export function request(config) {
const instance = axios.create({
baseURL: 'http://152.136.185.210:7878/api/m5',
timeout: 5000
})
/* axios的拦截器 */
/* 传入两个参数(都是函数),发送成功调用第一个函数,发送失败调用第二个函数 */
/* 请求拦截 */
instance.interceptors.request.use(config => {
/* 请求拦截的作用 */
/* 比如config中的一些信息不符合服务器的要求,要改 */
/* 比如在发送网络请求时页面加一个请求的图标 */
/* 某些网络请求需要携带token */
console.log(config);
/* 返回出去,不然就被拦截了 */
return config
}, err => {
console.log(err);
})
/* 响应拦截 */
instance.interceptors.response.use(res => {
console.log(res);
}, err => {
console.log(err);
})
/* 发送请求 */
/* axios本身就返回一个promise */
return instance(config)
}
使用
/* 封装request模块 */
import { request } from './network/request'
request({
url: '/home/data?type=sell&page=1',
method: 'get'
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})