Vue-7-axios

axios

安装 axios 依赖

npm install axios --save

导入

import axios from 'axios'

简单使用

axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  params: {
    type: 'aaa',
    name: 'bbb'
  },
  method: 'get'
}).then(res => {
  // 回调
  console.log(res);
})

发送并发请求

并发请求的结果是以一个数组的方式返回

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: 3
  }
})]).then(results => {
  console.log(results);
})

将数组里的结果独立显示

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

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: 3
  }
})]).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
})

const instance2 = axios.create({
  baseURL: 'https://httpbin.org/get',
  timeout: 5000
})

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

instance2({
  url: ''
}).then(res => {
  console.log(res);
})

封装axios

为什么需要封装？

为了防止以后如果你使用的这个框架，或者插件不再更新或者维护，能够以最简便的方式去替换掉

创建一个 network 文件夹，下创建一个 request.js 文件

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

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

模拟使用

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

拦截器

request.js

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

  // 2、axios的拦截器
  // 请求拦截的作用
  instance.interceptors.request.use(config => {
    console.log(config);
    // 1、比如config中的一些信息不符合服务器的要求
    // 2、比如每次发送网络请求时，都希望在界面中显示一个请求的图标
    // 3、某些网络请求（比如登录（token）），必须携带一些特殊的信息
    return config
  }, error => {
    console.log(error);
  })

  // 响应拦截
  instance.interceptors.response.use(res => {
    console.log(res);
    // 处理后返回数据
    return res.data
  }, error => {
    console.log(error);

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

main.js

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