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

目录

一、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:'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)
          })