axios网络请求框架的使用

1. 基本使用

axios({
  url: 'https://www.baidu.com', // 仅仅作为示例，这个地址跨域请求会被拦截
  params: { // params应用于GET请求，会被拼接到地址最后，eg: https://www.baidu.com?type=nothing&page=1
    type: 'nothing',
    page: 1
  },
  method: 'GET'
}).then(result => {
  console.log(result)
});

2. axios.get(url, config)

axios.post(url, config)

axios.get('https://www.baidu.com', {
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res)
});

3.  可以使用axios.defaults来配置某些常用属性

axios.defaults.baseURL = 'xxx' // 这样config对象中url可以简写
axios.defaults.timeout = 5000

4.  axios.all() 若一个操作需要依赖两个网络请求获取的数据，则需要axios.all()方法，作用是多个请求均已完成时，执行相应操作

axios.defaults.timeout = 5000;
axios.all([
  axios({
    url: 'url1',
    params: {
      type: 'pop',
      page: 1
    }
  }),
  axios({
    url: 'url2',
    params: {
      type: 'pop',
      page: 2
    }
  })]).then(res => {
    console.log(res);
});

5. 封装自己框架的axios

(1) 在src目录下创建network文件夹

(2) 在network目录下创建request.js文件，在其中导入axios

(3) 封装自己的网络请求，使用 axios.create 创建多个axios实例

(4) 导出封装代码，外界导入使用

------------- request.js -------------

import axios from 'axios'
export function instance1(config) {
  const ins1 = axios.create({
    baseURL: 'url_base',
    timeout: 5000
  });
  return ins1(config);
}

------------- main.js -------------

import {instance1} from 'network/request.js'
instance1({
  url: '/home/data',
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log('Hello Axios');
});