（vue）axios

基本使用

axios({
  url:'http://123.207.32.32:8000/home/multidata',
  method:'get',
  param:{
  	type="pop",
  	page:3
  }
}).then(res=>{
  console.log(res)
})

对axios进行封装

为啥进行封装

如果项目换了网络请求插件的话，就不用再去单个组件中去修改代码了

封装

request.js

import axios from 'axios'
export function request(config){
    // return new Promise((resolve,reject)=>{
    //     const instance=axios.create({
    //         baseURL:"http://123.207.32.32:8000"
    //     })
    //     instance(config)
    //     .then(res=>{
    //         resolve(res)
    //     })
    //     .catch(err=>{
    //         reject(err)
    //     })
    // })
	//instance本身返回的就是一个Promise类型，无需新建Promise
    const instance=axios.create({
        baseURL:"http://123.207.32.32:8000"
    })
    return instance(config)
}

组件中调用：

//封装axios
import {request} from './network/request'
request({
  url:'/home/multidata'
}).then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err)
})

拦截器

请求成功、请求失败；响应成功，响应失败