Vue的axios配置

1.安装（用了阿里的镜像路径，所以使用cnpm）

cnpm install axios --save

2.建立src=》network=》request.js

import axios from 'axios'

export function request(config){
  return new Promise((resolve,reject) => {
    //1.创建axios的实例
    const instance = axios.create({
      baseURL:'http://111.11.11.11',
      timeout:5000
    });

    //发送真正的网络请求
    instance(config)
    .then(res => {
      resolve(res);
    }).catch(err => {
      reject(err);
    });
  })
}

或者改成：

import axios from 'axios'

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

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

 

3.main.js的配置和使用

import {request} from './network/request'

request({
  url:'/hone/mutidata'
}.then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
}))

4.补充：拦截器的使用

import axios from 'axios'

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

  //2.axios的拦截器
  //2.1请求拦截
  //1）这里可以用来弄等待请求的动画
  //2）也可以用来用户请求验证问题跳转其他界面（如404）
  instance.interceptors.request.use(aaa => {
    console.log(aaa);
    return aaa;
  },err => {
    console.log(err)
  })

  //2.2响应拦截
  instance.interceptors.response.use(res => {
    console.log(res);
  },err => {
    console.log(err);
  })

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

 

 

参照记录：https://www.bilibili.com/video/BV15741177Eh?p=146