axios的基本使用

---

axios的使用优点

• 在浏览器中发送 XMLHttpRequests 请求
• 在 node.js 中发送 http请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据

1.axios的基本使用

axios({
  url: 'http://123.207.32.32:8000/home/data',
  // 专门针对get请求的参数拼接
  method: 'post',//请求类型
  // http://123.207.32.32:8000/home/data？type=pop&page=1
  params: {
    type: 'pop',
    page: 1,//这段数据最后会拼接到url后面
  }
}).then(res => {
  console.log(res);
})

2.axios发送并发请求

有时候, 我们可能需求同时发送两个请求，使用 axios.all 可以放入多个请求的数组.
axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 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);
}))/*.then(results => {
  console.log(results);
  console.log(results[0]);
  console.log(results[1]);
})*/

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

4.创建对应的axios的实例

当给该实例设置一些默认配置时, 这些配置就被固定下来了.
但是后续开发中, 某些配置可能会不太一样；故需要用到axios的实例

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

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

5.封装request模块

// xxx.js请求文件
import { request } from "模块封装地址";

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


// request.js模块
import axios from 'axios'

export function request(config) {
  // 创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })
  // 发送真正的网络请求
  return instance(config) //instance本身就是一个promise
  // 后面如果需要更改请求框架，
  // 则使用prominse更改，替代即可
  // 不用再更改项目中的代码
}

6.封装request模块之axios的拦截器

// 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
  })

  // 2.axios的拦截器
  // 2.1.请求拦截的作用
  instance.interceptors.request.use(config => {
    // console.log(config);
    // 1.比如config中的一些信息不符合服务器的要求
    // 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标，在请求中成功中显示，响应中成功中关闭；
    // 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息，否则跳转到登录界面
    return config //注意这里在拦截处理结束之后需要将数据进行返回
  }, err => {
    // console.log(err);
  })

  // 2.2.响应拦截
  instance.interceptors.response.use(res => {
    // console.log(res);
    return res.data//注意这里在拦截处理结束之后需要将数据进行返回
  }, err => {
    console.log(err);
  })

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