vue如何发送网络请求，使用axios事半功倍！

柔情只为你懂 2022-10-09 03:10 319阅读 0赞

**目录**

一、axios使用

1.支持多种请求方式：

2.安装

3.简单使用实例

4.发送并发请求

5.全局配置

二、axios的实例

1.为什么要创建 axios的实例呢?

2.使用

三、、axios模块封装

四、axios拦截器

--------------------

# 一、axios使用 #

## 1.支持多种请求方式： ##

axios(config)

axios.request(config)

axios.get(url\[, config\])

axios.delete(url\[, config\])

axios.head(url\[, config\])

axios.post(url\[, data\[, config\]\])

axios.put(url\[, data\[, config\]\])

axios.patch(url\[, data\[, config\]\])

## 2.安装 ##

npm install axios --save

## 3.简单使用实例 ##

1.安装
    import axios from 'axios'
    2.get请求
    axios({
         // 默认是get
         url: 'http://localhost:8000/home/multidata',
         method: 'get'
    }).then((result) => {
         console.log(result)
    })
    ---
    axios({
         //url:  'http://localhost:8000/home/data?type=sell&page=1',
         url: 'http://localhost:8000/home/data',
         params: {
              type: 'sell',
              page: 1
         },
         method: 'get'
    }).then((result) => {
         console.log(result)
    })

## 4.发送并发请求 ##

有时候，我们可能需求同时发送两个请求

使用axios.all，可以放入多个请求的数组。

axios.all(\[\]) 返回的结果是一个数组，使用axios.spread可将数组\[res1, res2\]展开为res1，res2

axios.all([axios({
         url: 'http://localhost:8000/home/multidata'
    }), axios({
         url: 'http://localhost:8000/home/data',
         params: {
              type: 'sell',
              page: 1
         }
    })]).then((results) => {
         console.log(results)
    })
    //axios.spread展开（不太常用）
    axios.all([axios({
         url: 'http://localhost:8000/home/multidata'
    }), axios({
         url: 'http://localhost:8000/home/data',
         params: {
              type: 'sell',
              page: 1
         }
    })]).then(axios.spread((res1, res2) => {
         console.log(res1)
         console.log(res2)
    }))
    //数组的解构，对应也有对象的解构{name, age} = obj
    axios.all([axios({
         url: 'http://localhost:8000/home/multidata'
    }), axios({
         url: 'http://localhost:8000/home/data',
         params: {
              type: 'sell',
              page: 1
         }
    })]).then(([res1, res2]) => {
         console.log(res1)
         console.log(res2)
    })

## 5.全局配置 ##

（1）在上面的示例中，我们的BaseURL是固定的

事实上，在开发中可能很多参数都是固定的。

这个时候我们可以进行一些抽取，也可以利用axios的全局配置

axios.defaults.baseURL = 'http://localhost:8000'
    axios.defaults.headers.post['Content-Type'] = 'application/x-www/form-urlencoded'
    axios.default.timeOut = 50000
    
    axios.all([axios({
         url: '/home/multidata'
    }), axios({
         url: '/home/data',
         params: {
              type: 'sell',
              page: 1
         }
    })]).then((results) => {
         console.log(results)
    })

（2）常见配置项

请求地址

url:'/user',

请求类型

method:'get',

请根路径

baseURL:'[http://www.mt.com/apl][http_www.mt.com_apl],

请求前的数据处理

transformRequest: \[function(data)\{\}\]

请求后的数据处理

transformResponse: \[function(data)\{\}\],

自定义的请求头

headers:\{'x-requested-With':'XMLHttpRequest'\},

URL查询对象

params:\{id:12\},

查询对象序列化函数

paramsSerializer: function(params)\{\}

request body

data:\{key:'a'\}

超时设置s

timeout: 1000,

跨域是否带 Token

withCredentials: false,

自定义请求处理

adapter: function(resolve, reject, config)\{\},

身份验证信息

auth: \{uname:", pwd: '12'\},

响应的数据格式json/blob/ document/ arraybuffer/text/ stream

responseType:'json',

# 二、axios的实例 #

# 1.为什么要创建 axios的实例呢? #

口当我们从 axios模块中导入对象时,使用的实例是默认的实例

口当给该实例设置一些默认配置时,这些配置就被固定下来了.

口但是后续开发中,某些配置可能会不太一样.

口比如某些请求需要使用特定的 baseURL或者 timeouti或者 content-Type等

口这个时候我们就可以创建新的实例，并且传入属于该实例的配置信息.

# 2.使用 #

const instance1 = axios.create({
         // 全局实例配置
         baseURL: 'http://localhost:8000',
         timeOut: 5000
    })
    
    instance1({
         url: '/home/multidata'
    }).then(res => {
         console.log(res)
    })

# 三、、axios模块封装 #

import axios from 'axios'
    // 1.传success、failure方法
    export function request(config, success, failure) {
         //1.创建实例
         const instance = axios.create({
              baseURL: 'http://localhost:8000',
              timeOut: 5000
         })
         
         // 2.发送真正的网络请求
         instance(config)
              .then(res => {
                  success(res)
              })
              .catch(err => {
                  failure(err)
              })
    }
    // 2.只传config
    export function request2(config) {
         //1.创建实例
         const instance = axios.create({
              baseURL: 'http://localhost:8000',
              timeOut: 5000
         })
         
         // 2.发送真正的网络请求
         instance(config.baseConfig)
              .then(res => {
                  config.success(res)
              })
              .catch(err => {
                  config.failure(err)
              })
    }
    // 3.使用Promise（axios本身是返回一个Promise，所以没必要再次返回一个promise了）
    export function request3(config) {
         return new Promise((resolve, reject) => {
              //1.创建实例
              const instance = axios.create({
                  baseURL: 'http://localhost:8000',
                  timeOut: 5000
              })
              
              // 2.发送真正的网络请求
              instance(config)
                  .then(res => {
                       resolve(res)
                  })
                  .catch(err => {
                       reject(err)
                  })
         })
    }
    // 4.简化
    export function request4(config) {
         //1.创建实例
         const instance = axios.create({
              baseURL: 'http://localhost:8000',
              timeOut: 5000
         })
         
         // 2.发送真正的网络请求
         return instance(config);
    }

// 封装网络请求
    import {request, request2, request3, request4} from  './network/request'
    request({
         url: '/home/multidata'
    }, res => {
         console.log(res)
    })
    request2({
         baseConfig: {
              url: '/home/multidata'
         },
         success: function(res) {
              console.log(res)
         }
    })
    request3({
         url: '/home/multidata'
    }).then(res => {
         console.log(res)
    }).catch(err => {
         console.log(err)
    })
    request4({
         url: '/home/multidata'
    }).then(res => {
         console.log(res)
    })

# 四、axios拦截器 #

//1.创建实例
         const instance = axios.create({
              baseURL: 'http://localhost:8000',
              timeOut: 5000
         })
         
         // 1.1拦截器，必须return，否则拿不到东西
         instance.interceptors.request.use(config => {
              console.log('req拦截器success')
              // 比如config中的一些信息不符合服务器的要求
              // 比如每次发送网络请求时，都希望在界面显示一个请求的图标
              // 某些网络请求（比如登录）必须携带一些特殊的东西
              console.log(config)
              return config
         }, err => {
              console.log('req拦截器fail')
              console.log(err)
              return err
         })
         
         instance.interceptors.response.use(response => {
              console.log('resp拦截器success中')
              return response.data
         }, err => {
              console.log('resp拦截器fail中')
              return err
         })
         
         // 2.发送真正的网络请求
         instance(config)
              .then(res => {
                  success(res)
              })
              .catch(err => {
                  failure(err)
              })

[http_www.mt.com_apl]: http://www.mt.com/apl