zoukankan      html  css  js  c++  java
  • 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)
         })
     })
    }
    View Code
    使用
    //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)
    }
    使用方法和原来一样
  • 相关阅读:
    HDU 5744
    HDU 5815
    POJ 1269
    HDU 5742
    HDU 4609
    fzu 1150 Farmer Bill's Problem
    fzu 1002 HangOver
    fzu 1001 Duplicate Pair
    fzu 1150 Farmer Bill's Problem
    fzu 1182 Argus 优先队列
  • 原文地址:https://www.cnblogs.com/polax/p/13274026.html
Copyright © 2011-2022 走看看