网络模块封装-axios

axios

功能特点：

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

axios框架的基本使用

npm install axios --save

import axios from 'axios'

// config对象类型
// axios(config)最基本的使用
// 本身可以返回Promise数据
// 1.基本使用
axios({
  // 服务器
  url:'http://123.207.32.32:8000/home/multidata',
  //get请d
  method:'get'
}).then(res => {
  console.log(res);
})

axios发送并发请求

格式：数组

axios.all([axios(), axios()]).then(result => {

})

axios.all([axios({
  url: '/home/multidata'
}), axios({
  url:'http://123.207.32.32:8000/home/data',
    // 专门针对get请求的参数拼接 
  params: {
    type: 'sell',
    page: 4
  }
})]).then(results => {
    console.log(results);
    console.log(results[0]);
    console.log(results[1]);
  })

另一种写法：

axios的全局配置信息相关

使用全局的axios和配置在进行网络请求
axios的配置相关信息

 axios.defaults.baseURL = 'http://123.207.32.32:8000'
 axios.defaults.timeout = 5000

axios的实例和模块封装

为什么要创建axios的实例呢？

• 当我们从axios模块中导入对象时，使用的实例是默认的实例
• 当给该实例设置一些默认配置时，这些配置就被固定下来了
• 但是后续开发中，某些配置可能会不太一样
• 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等
• 这个时候，我们就可以创建新的实例，并且传入属于该实例的配置信息

创建对应的axios的实例

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

使用创建的axios实例：

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

instance1({
  url:'/home/data',
  params: {
    type:'pop',
    page: 1
  }
}).then(res => {
  console.log(res)
})

创建另外一个实例：

const instance2 = axios.create({
  baseURL:'',
  timeout: 10000,
  headers: {}
})

对实例进行模块封装

1.

 export function request(config, success, failure) {
   // 1.创建axios的实例
  const instance1 = axios.create({
     baseURL:'htto://123.207.32.32:8000',
     timeout: 5000
  })
  // 发送真正的网络请求
  instance1(config)
   .then(res => {
     // console.log(res);
    success(res)
   })
   .catch(err => {
     // console.log(err);
     failure(err)
   })
 }

// 5.封装request模块
import {request} from './network/request'

request({
  url:'/home/multidata'
}, res => {
  console.log(res)
}, err => {
  console.log(err)
})

export function request(config) {
  // 1.创建axios的实例
  const instance1 = axios.create({
    baseURL:'htto://123.207.32.32:8000',
    timeout: 5000
  })
  // 发送真正的网络请求
  instance1(config.baseConfig)
  .then(res => {
    // console.log(res);
    config.success(res)
  })
  .catch(err => {
    // console.log(err);
    failure(err)
  })
}

request({
  baseConfig: {

  },
  success: function (red) {
    
  },
  failure: function (err) {

  }
})

3.最终方案：使用promise

export function request(config) {
 return new Promise((resolve, reject) => {
      // 1.创建axios的实例
    const instance1 = axios.create({
      baseURL:'htto://123.207.32.32:8000',
      timeout: 5000
    })
    // 发送真正的网络请求
    instance1(config)
    .then(res => {
      resolve(res)
    })
    .catch(err => {
      reject(err)
    })
  })
}

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

axios拦截器的使用

export function request(config) {
       // 1.创建axios的实例
     const instance1 = axios.create({
       baseURL:'htto://123.207.32.32:8000',
       timeout: 5000
     })
      //  2.axios的拦截器
      instance1.interceptors.request.use(config => {
        console.log(config)
        // 2.1拦截请求的作用
        // 1.比如说config中的一些信息，不符合服务器的要求

        // 2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标

        // 3.某些网络请求（比如登陆(token)）,必须携带一些特殊的信息

        // 拦截下来要还回去
        return config
        // 2.2响应拦截
      }, err => {
        console.log(err)
      })
      instance1.interceptors.response.use(res => {
        console.log(res)
        return res.data
      },err => {
        console.log(err)
      })
     // 3.发送真正的网络请求
    //  本身返回的就是promise
     return instance1(config)
  }