axios的实例和模块封装

axios的实例应用

为什么要创建实例

在开发大型项目时，最好不要直接使用全局的axios，而是创建单独的实例

axios实例的创建和使用

import axios from 'axios'

//创建axios实例
const instance1 = axios.create({
  baseURL:'http://123.207.32.32:8000',
  timeout:5000
})
//使用实例
instance1({
  url:'/home/multidata'
}).then(res=>{
  console.log(res)
})
instance1({
  url:'/home/data',
  params:{
    type:"page",
    page:1
  }
}).then(res=>{
  console.log(res)
})
//创建其他实例（每个实例有自己独立的配置）
const instance2 = axios.create({
  baseURL:'https://movie.douban.com/',
  timeout:3000
})

 为什么要封装

在多个组件中，避免直接import axios from 'axios'

封装方法1

src etwork equest.js 封装

import axios from 'axios'

//创建一个叫request的实例
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)
     })
 })
}

使用

//request模块
import {request} from "./network/request";

//request返回的是一个Promise 所以可以直接.then
request({
  url:'/home/multidata'
}).then(res=>{
  console.log(res);
}).catch(err=>{
  console.log(err);
})

//为什么 instance 可以直接调.then 
//因为AxiosInstance的返回值本身就是一个Promise
因此可以简略成封装方法2

 

封装方法2 （推荐）

 src etwork equest.js 封装

import axios from 'axios'
//创建一个叫request的实例
export function request(config) {
   //创建实例
   const instance = axios.create({
     baseURL:'http://123.207.32.32:8000',
     timeout:5000
   })
   //发送网络请求
   //为什么 instance 可以直接调.then
   //因为AxiosInstance的返回值本身就是一个Promise 只要直接return就可以了
   return instance(config)
}

使用方法和原来一样