axios 的基本使用 以及请求拦截 响应拦截

axios的基本使用

import axios from 'axios'

axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  // method: 'post'
}).then(res => {
  console.log(res);
})

axios({
  url: 'http://123.207.32.32:8000/home/data',
  // 专门针对get请求的参数拼接
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
})


axios({
 url: 'http://123.207.32.32:8000/home/multidata',
 // method: 'post'
}).then(res => {
 console.log(res);
})

axios({
 url: 'http://123.207.32.32:8000/home/data',
 // 专门针对get请求的参数拼接
 params: {
 type: 'pop',
 page: 1
 }
}).then(res => {
 console.log(res);
})

|

axios发送并发请求

简单说一下什么是并发请求 就是当有 多个请求需要在全部完成之后 才能进入下一步程序

axios.all([axios({
 url: 'http://123.207.32.32:8000/home/multidata'
}), axios({
 url: 'http://123.207.32.32:8000/home/data',
 params: {
 type: 'sell',
 page: 5
 }
})]).then(results => {
// 这个时候请求成功之后的就是个数组 而且是按请求顺序排好的
 console.log(results);
 console.log(results[0]);
 console.log(results[1]);
})

使用全局的axios和对应的配置在进行网络请求")使用全局的axios和对应的配置在进行网络请求

axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000

axios.all([axios({
 url: '/home/multidata'
}), axios({
 url: '/home/data',
 params: {
 type: 'sell',
 page: 5
 }
})]).then(axios.spread((res1, res2) => {
 console.log(res1);
 console.log(res2);
}))

|

创建对应的axios的实例")创建对应的axios的实例

const instance1 = axios.create({
 baseURL: 'http://123.207.32.32:8000',
 timeout: 5000
})

instance1({
 url: '/home/multidata'
}).then(res => {
 console.log(res);
})

instance1({
 url: '/home/data',
 params: {
 type: 'pop',
 page: 1
 }
}).then(res => {
 console.log(res);
})

const instance2 = axios.create({
 baseURL: 'http://222.111.33.33:8000',
 timeout: 10000,
 // headers: {}
})

|

封装request模块")封装request模块

大概讲一下 这个封装模块的目的 就是为了 减少项目对axios 的依赖 如果 axios 停止更新了 ，我们可以通过这个模块进行修改 就不用改成百上千个页面请求了

export function request(config) {
 return new Promise((resolve, reject) => {
 // 1.创建axios的实例
 const instance = axios.create({
 baseURL: 'http://123.207.32.32:8000',
 timeout: 5000
 })

 // 发送真正的网络请求
 instance(config)
 .then(res => {
 resolve(res)
 })
 .catch(err => {
 reject(err)
 })
 })
}

export function request(config) {
 // 1.创建axios的实例
 const instance = axios.create({
 baseURL: 'http://123.207.32.32:8000',
 timeout: 5000
 })

 // 发送真正的网络请求
 instance(config.baseConfig)
 .then(res => {
 // console.log(res);
 config.success(res);
 })
 .catch(err => {
 // console.log(err);
 config.failure(err)
 })
}

export function request(config, success, failure) {
 // 1.创建axios的实例
 const instance = axios.create({
 baseURL: 'http://123.207.32.32:8000',
 timeout: 5000
 })

 // 发送真正的网络请求
 instance(config)
 .then(res => {
 // console.log(res);
 success(res);
 })
 .catch(err => {
 // console.log(err);
 failure(err)
 })
}

|

模块封装

 import {request} from "./network/request";

request({
 url: '/home/multidata'
}, res => {
 console.log(res);
}, err => {
 console.log(err);
})

request({
 baseConfig: { },
 success: function (res) { },
 failure: function (err) { }
})

request({
 url: '/home/multidata'
}).then(res => {
 console.log(res);
}).catch(err => {
 // console.log(err);
})

|

拦截器

import axios from 'axios'

export function request(config) {
 // 1.创建axios的实例
 const instance = axios.create({
 baseURL: 'http://123.207.32.32:8000',
 timeout: 5000
 })

 // 2.axios的拦截器
 // 2.1.请求拦截的作用
 instance.interceptors.request.use(config => {
 // console.log(config);
 // 1.比如config中的一些信息不符合服务器的要求

 // 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标

 // 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息
 return config
 }, err => {
 // console.log(err);
 })

 // 2.2.响应拦截
 instance.interceptors.response.use(res => {
 // (数据过滤或者其他处理)
 console.log(res);
 return res.data
 }, err => {
 // (根据错误码为用户提供合理性展示)
 console.log(err);
 })

 // 3.发送真正的网络请求
 return instance(config)  
//  Promise
}

在Vue 4.0 测试ok