vue-axios的使用

1.安装

npm install axios --save

2.导入

import axios from ‘axios’

3.基本使用

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

4.并发请求

axios.all([axios.get('URL'),axios.get('URL')]).then(axios.spread((res1,res2) => {
  console.log(res1);
  console.log(res2);
}))

5.全局配置

5.1设置BaseURL

5.2设置header

5.3设置timeout

axios.defaults.timeout = 5000;
axios.defaults.baseURL = 'URL';
axios.defaults.headers = '';

5.4创建axios实例

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

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

5.5模块封装

5.5.1方法一

封装到network中

import axios from 'axios'

export function request(config, success, failture) {
  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);
    failture(err);
  })
}

使用方法：

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

5.5.2方法二

封装：

export function request(config) {
  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.failture(err);
  })
}

使用：

import {request} from "./network/request";
request({
  baseConfig: {
    url: '/home/multidata'
  },
  success: function(res){
    console.log(res);
  },
  failture: function(err){
    console.log(err);
  }
})

5.5.3最终方案

封装：

export function request(config) {
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000
    })
    instance(config)
    .then(res => {
      resolve(res)
    })
    .catch(err => {
      reject(err)
    })
  })
}

使用：

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

5.5.4究极方案

封装：

export function request(config) {
  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);
})

6.拦截器

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);
    });
    instance.interceptors.response.use(res => {
      // console.log(res);
      // 这里可以只返回data
      // 这里需要加return 否则会拦截结果
      return res.data;
    }, err => {
      console.log(err);
    });
  // 3.发送真正的网路请求
  return instance(config)
}