axios基本使用

1.安装 npm install axios --save
2.引入
3.最简单的使用方法

axios({
     url:'',
     method:'post'//不写默认get
}).then({
    console.log(res)
})

4.带参数的

axios({
     url:'',
     params:{   //地址后面跟的参数
       type:'pop',
       page:1
     }
}).then({
    console.log(res)
})

5.并发请求（在一个功能中同时需要多个请求）

//axios.all([axios(),axios()]).then(results =>{})
axios.all([axios({
     url:'url1'
}),axios({
     url:'url2',
     params:{
       page:4
     }
})]).then(results =>{
     console.log(results)  //results是数组
})

axios.all([axios({
     url:'url1'
}),axios({
     url:'url2',
     params:{
       page:4
     }
})]).then(axios.spread((res1,res2) =>{
   //把上面那个results展开 直接拿到res1 res2
   console.log(res1)
})))

6.全局配置

axios.defaults.baseURL = 'http://www.baidu.com'  //公共的  写到全局里
axios.defaults.timeout = 5000
axios.all([axios({
     url:'/home/move'
}),axios({
     url:'/home/data',
     params:{
       page:4
     }
})]).then(results =>{
     console.log(results)  //results是数组
})

7.axios实例

//创建一个实例
const instance1 = axios.create({
    baseURL:'www.baidu.com',
    timeout:5000
})
//用这个实例 
instance1 ({
  url:'/home/hah'
}).then({
   console.log(res)
})

8.axios封装
新建一个js

• 最终方法

import axios  from 'axios'
export function request(config){
   //1.创建一个axios的实例
    const instance = axios.creat({
        baseURL:'www.baidu.com',
        timeout:5000
    })
    //发送真正的网络请求
   return instance (config)   //因为instance 是个axios  所以它本身自带promise 
}

//在需要用的地方
import  {request}  from  "./network/request";
request({
  url:'/home/hahha'
}).then(res =>{
   console.log(res)
}).catch(err => {
   console.log(err)
})

• 扩展 方法一

import axios  from 'axios'
export function request(config){
    //1.创建一个axios的实例
    const  instance = axios.creat({
        baseURL:'www.baidu.com',
        timeout:5000
    })
    //发送真正的网络请求
    instance (config)
    .then(res =>{
        success(res)
    }).catch(err =>{
        failure(err )
    })
}

//在需要用的地方
import  {request}  from  "./network/request";

request({
  url:'/home'
},res =>{
   console.log(res)   //成功的回调
},err => {
    console.log(err)    //失败的回调
})

• 扩展 方法二

import axios  from 'axios'
export function request(config){
    //1.创建一个axios的实例
    const  instance = axios.creat({
        baseURL:'www.baidu.com',
        timeout:5000
    })
    //发送真正的网络请求
    instance (config.baseCongig)
    .then(res =>{
        config.success(res)
    }).catch(err =>{
        config.failure(err )
    })
}

//在需要用的地方
import  {request}  from  "./network/request";
request({
  baseConfig:{
      url:'/home'
  },
  success:funciton(res){
     console.log(res)
  },
  failure:function(err){
     console.log(err)
  }
})

• 扩展 方法三

import axios  from 'axios'
export function request(config){
   return new  Promise((resolve,reject) => {
      //1.创建一个axios的实例
    const instance = axios.creat({
        baseURL:'www.baidu.com',
        timeout:5000
    })
    //发送真正的网络请求
    instance (config)
    .then(res =>{
       resolve(res)
    }).catch(err =>{
        reject(err)
    })
   })
}

//在需要用的地方
import  {request}  from  "./network/request";
request({
  url:'/home/hahha'
}).then(res =>{
   console.log(res)
}).catch(err => {
   console.log(err)
})

9.axios拦截器的使用

• 请求拦截的作用
  1）config中的一些信息不符合服务器要求
  2）每次发送网络请求时 都需要一个请求图标
  3）某些网络请求 （比如登录），必须携带一些特殊信息

//封装axios的JS
import axios  from 'axios'
export function request(config){
   //1.创建一个axios的实例
    const instance = axios.creat({
        baseURL:'www.baidu.com',
        timeout:5000
    })
    //2.拦截器
    //请求拦截(请求之前的拦截)
    instance.interceptors.requset.use(config => {
       cpnsole.log(config)
       return config
    },err =>{
      console.log(err)
    })
    //响应拦截(请求以后的拦截)
    instance.interceptors.response.use(res => {
        console.log(res)
    },err => { 
        console.log(err)
    })
    //3.发送真正的网络请求
   return instance (config)   //因为instance 是个axios  所以它本身自带promise 
}