2020-03-17 vue-axios

npm install axios --save
import axios from 'axios' //导入一下就可以用 
axios({
  url:'http://123.207.32.32:8000/home/multidata',
  method:'post',
  params:{
    name:'abc',
    key:'key'
  }
}).then((res) =>{
  console.log(res);
})

//发送并发请求
axios.all([axios(),axios()])
     .then((result)=>{ //上面的数组里的网络请求都完成之后回调then

     })

axios.all([axios({
  url:'http://123.207.32.32:8000/home/multidata',
}),axios({
  url:'http://123.207.32.32:8000/home/multidata',
})])
    .then((result3)=>{ //上面的数组里的网络请求都完成之后回调then
      console.log(result);
    })

// 全局配置
axios.defaults.baseURL = ''
axios.defaults.timeout = 5000
// get方式用params参数
// post方式用data参数

// baseUrl可能不同,这时候就要创建axios实例
const instance1 = axios.create({
  timeout:5000,
  baseURL:''
})

instance1({
  url:'',
}).then((res)=>{
  console.log(res);
})

包装axios

request.js

import axios from 'axios'
// 3.
export function request(config) {
    const instance = axios.create({
        baseURL:'',
        timeout:5000,
    })
    return instance(config)
}


// 2.
export function request(config) {
    return new  Promise((resolve, reject)=>{

        const instance = axios.create({
            baseURL:'',
            timeout:5000,
        })
        instance(config).then((res)=>{
            resolve(res)
        }).catch((error)=>{
            reject(error)
        })
    })
}
// 1.
export function request(config) {
    const instance = axios.create({
        baseURL:'',
        timeout:5000,
    })

    instance(config.baseConfig)
        .then((res)=>{
            config.success(res)
        }).catch((error)=>{
            config.failure(error)
        })

}

使用

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

// 2.
request({
  url:'http://123.207.32.32:8000/home/multidata',
}).then(res =>{
  console.log(res);
}).catch(error =>{
  console.log(error);
})


// 1.
request({
  baseConfig:{
    url:'http://123.207.32.32:8000/home/multidata',
  },
  success(res){
    console.log(res);
  },
  failure(error){
    console.log(error);
  }
})