axios

axios

一、axios的基本使用

1. 首先下载 npm install --save axios

//引用
import axios from 'axios'
//发送axios请求
axios({
  url:'http://123.207.32.32:8000/home/multidata',//要请求的地址
  method:'get',//请求的方式，get、post
  params:{//参数可以写再url里面拼接也可以写在这里，针对get请求
      
  }
}).then(res=>{//获得请求的结果，
  console.log(res)
})

如果想要拿到俩个请求的后在进行处理结果，就用这个方法，返回的是一个数组

//引用
import axios from 'axios'
//发送axios并发请求
axios.all([
    axios({
        url:''
    }),
    axios({
        url:''
    })
]).then(res=>{//在这里对俩个请求的结果进行统一的处理
    console.log(res)
})
//.then(axios.spread((res1,res2)=>{//这样写可以将拿到的俩个请求的结果进行分割，将数组展开
//console.log(res1)
//console.log(res2)
//}))

axios的配置信息

这些请求配置也可以单独写在axios请里面，下面的写法是全局请求配置

//全局配置url
axios.defaults.baseURL = 'http://152.136.185.210:8000'
//全局配置请求超时时间
axios.defaults.timeout = 5000
//全局配置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
data:{//针对post请求的参数
    key:'aa'
}

axios拦截请求

发送请求的时候拦截

//俩个参数都是函数，第一个参数是请求的一些配置相关的信息，第二个参数请求出错的信息
instance.interceptors.request.use(
     config=>{console.log(config)
              //对发送请求进行拦截后一定要把config返回出去
      return config
      }, err=>{
        console.log(err)
      }
    )

拦截响应请求

//俩个参数都是函数，第一个参数是响应的结果，第二个是响应错误的信息
instance.interceptors.response.use(
    //对响应请求进行处理后要return出去，由于res里面有很多内容，数据只是在data里面，所以就直接res.data就行
    res=>{console.log(res);return res.data},
    err=>{ console.log(err)})

axios的实例

为什么要创建axios的实例

• 当我们从axios模块中导入对象时，使用的实例是默认的实例
• 当给实例设置一些默认配置时，这些配置就被固定下来了
• 但是后续开发中，某些配置可能不太一样
• 这个时候，我们就可以创建新的实例，并且传入属于该实例的配置信息

//创建实例
const instance = axios.create({
    baseURL:'127.0.0.1:8000',
    timeout:5000
})
//使用创建处理的实例发送请求
instance({
    url:'/home',
    method:'get'
})

封装axios

为什么要进行封装axios

方便维护，防止有一天axios不再维护了，所以要对项目进行一些修改，这样就不用一个一个的找有发送axios请求的地方进行修改，直接修改自己封装axios的那个地方就行，

封装步骤

1. 首先在src目录创建一个文件夹，名字network
2. 在里面创建一个js文件，request

第一种封装方法

//引入axios模块
import axios from 'axios'
//导出这个封装好的axios，不要使用export default，建议使用export，这样可以导出多个，有可能是在不同的服务器请求。
//传递3个参数，第一个是配置相关的对象，第二个是成时返回的函数，第三个是失败时返回的函数
export function request(config,success,failure) {
    //创建一个axios的实例，并对他进行一些基础的配置
  const instance = new axios.create({
    baseURL:'http://152.136.185.210:8000/api/z8',
    timeout:5000
  })
 instance(config)
   .then(res=>{
     success(res)
   })
   .catch(err=>{
     failure(err)
   })
}

//使用的方法
request({
      url:'/home/multidata',
      method:'get'
    },res=>{
     console.log(res)
    },err=>{
      console.log(err)
    })

第二种封装方法

//引入axios模块
import axios from 'axios'
export function  request(config) {
    //返回一个promise对象，使用的时候可以直接.then拿到结果进行处理
  return new Promise((resolve,reject)=>{
    const instance = axios.create({
      baseURL:'http://152.136.185.210:8000/api/z8',
      timeout:5000
    })
    instance(config)
        .then(res=>{resolve(res)})
        .catch(err=>{reject(err)})
  })
}
//使用方法
request({
    url:'/home/multidata',
    method:'get'
  }).then(res=>{
    this.result=res
  }).catch(err=>{
    console.log(err)
  })
  }

第三种封装方法

//引入axios模块
import axios from 'axios'
export function  request(config) {
    const instance = axios.create({
      baseURL:'http://152.136.185.210:8000/api/z8',
      timeout:5000})
    //直接返会instance，因为他本身就支持promise
   return instance(config)
}
//使用方法
request({
    url:'/home/multidata',
    method:'get'
  }).then(res=>{
    this.result=res
  }).catch(err=>{
    console.log(err)
  })
  }