Vue-cli4——axios

Vue-cli4——axios

Day1

---

---

前言

此文章根据官方文档及些网络资料编写，仅供个人使用。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、介绍

他支持多种请求方式

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]])

二、安装

在本地安装（局部）

npm install axios --save

三、简单使用

3.1 简单实例

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

3.2 axios.all

对网络请求进行合并

结构如下

axios.all([axios(), axios()]).then(result => {})

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(result => {
  console.log(result);
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OuW9gbYG-1605875558306)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201120164736741.png)]

将合并后的数据分割为2个，res1和res2

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(axios.spread((res1,res2) => {
  console.log(res1);
  console.log(res2);
}))

3.3 全局配置

实例：

// 全局配置
axios.defaults.baseURL = 'http://123.207.32.32:8000'
// 等待多久显示超时
axios.defaults.timeout = 3000
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);
}))

常见的配置选项

// 请求地址
url: '/user',
// 请求类型
method: 'get',
// 请根路径
baseURL: 'http://www.mt.com/api',
// 请求前的数据处理
transformRequest:[function(data){}],
// 请求后的数据处理
transformResponse: [function(data){}],
// 自定义的请求头
headers:{'x-Requested-With':'XMLHttpRequest'},
// URL查询对象
params:{ id: 12 },
// 查询对象序列化函数
paramsSerializer: function(params){ }
// request body
data: { key: 'aa'},
// 超时设置s
timeout: 1000,
// 跨域是否带Token
withCredentials: false,
// 自定义请求处理
adapter: function(resolve, reject, config){},
// 身份验证信息
auth: { uname: '', pwd: '12'},
// 响应的数据格式 json / blob /document /arraybuffer / text / stream
responseType: 'json',

四、实例

4.1 局部实例

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

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

4.2 封装实例

netword/reqest.js

import axios from 'axios'

export function request(config, success, failure){
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })
  // 发送网络请求
  instance(config).then(res =>{
    success(res)
  }).catch(err =>{
    failure(err)
  })
}

main.js

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

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

其实还有另外一个写法，因为axios，本身就有promise所以直接return就可以了

import axios from 'axios'

export function request(config) {
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })
  return instance(config)
}

五、拦截器

  // 拦截器
  instance.interceptors.request.use(config => {
    console.log(config);
    // 如果这里不返回，那么前面main，调用的时候就会显示无
    return config
  },err =>{
    console.log(err);
  })

总结