Bootstrap

axios基本使用以及拦截器的配置

1、axios函数参数简单介绍

首先要明白axios的参数是一个对象,我们依靠设置该对象的属性名来配置请求的具体参数

method是请求类型

url是请求地址

params是用于查询参数传参,get请求传参

data是用于请求体参数传参,post请求传参

axios({
      method: '请求的类型',
      url: '请求的URL地址',
      params: {},
      // data: {},
}).then((result) => {
      // .then 用来指定请求成功之后的回调函数
      // 形参中的 result 是请求成功之后的结果
})

2、axios中的get请求

axios({
      method: 'get',
      url: '请求的URL地址',
      params: {
       id: 1 //params传参的本质就是请求的URL地址后跟?id=1,通过路径进行传参
      }
}).then((result) => {
      // .then 用来指定请求成功之后的回调函数
      // 形参中的 result 是请求成功之后的结果
})

get请求简写

axios.get('请求的URL地址', {
      params: {
       id: 1 //params传参的本质就是请求的URL地址后跟?id=1,通过路径进行传参
      }
    }
}).then((result) => {
      // .then 用来指定请求成功之后的回调函数
      // 形参中的 result 是请求成功之后的结果
})

3、axios中的post请求

axios({
      method: 'post',
      url: '请求的URL地址',
      data: {
       username: '张三',
       password: '123456' //data传参的本质是把请求参数转为json格放在请求体中
      }
}).then((result) => {
      // .then 用来指定请求成功之后的回调函数
      // 形参中的 result 是请求成功之后的结果
})

  post请求简写

axios.post('请求的URL地址', {
       username: '张三',
       password: '123456' //data传参的本质是把请求参数转为json格放在请求体中
}).then((result) => {
      // .then 用来指定请求成功之后的回调函数
      // 形参中的 result 是请求成功之后的结果
})

4、axios中拦截器的使用

首先要明白拦截器(interceptors)就是用来全局拦截 axios 的每一次请求与响应

 

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
})
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应成功的数据做点什么
    return response
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error)
})

 注意:一部分请求拦截器因为所有请求,无须逻辑判断,都要执行操作,所以记性了全局的 axios 默认值

axios.defaults.baseURL = 'https://www.api.com'
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

以上是axios最简洁明了的使用方式,详细参阅axios官方文档哦,毕竟麻麻赖赖的属性一大堆的[狗头]

;