axios的使用浅谈

axios的使用

1.安装axios

$ npm install axios

2.创建一个axios实例

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  baseURL: baseURL, // api的base_url
  timeout: 10000, // 请求超时时间
  transformRequest: [(data) => {
    // 对 data 进行任意转换处理
    // let body = new URLSearchParams();
    // let body = new FormData();
    if(typeof data === 'object' && data !== null) {
      Object.keys(data).forEach(item => {
        if(data[item] !== null && data[item] !== undefined && data[item] !== '') {
          if(Array.isArray(data[item])) {
            body.append(item, JSON.stringify(data[item]))
          } else {
            body.append(item, data[item])
          }
        }
      })
      return body;
    }
    return data;
    // return JSON.stringify(data)
  }]
});

axios.defaults.withCredentials = true // 自动获取cookie

3.request拦截器

// request拦截器
service.interceptors.request.use(config => {
  // config.headers.post['Content_Type'] = 'application/json'
  config.headers['Content-Type'] = 'application/json' // 改变data的数据格式
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

4.respone拦截器

// respone拦截器
service.interceptors.response.use(
  /**
  * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
  * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
  */
  response => {
    return response
  },
  error => {
    console.log('err' + error)// for debug
    return Promise.reject(error)
  }
)

5.导出

export default service

调用axios方法（例子）

1.调用接口Api

// 导入该方法
import fetch from '../config/fetch.js'

// get请求 params   post请求 data

// 获取商品列表
export function msiteFoodTypes (opt) {
  return fetch({
    url: '/v2/index_entry',
    method: 'get',
    params: opt
  })
}

// 登录
/**
*@param username  用户名 Y
*@param password    密码 Y
*@param captcha_code   验证码 Y
*/
export function login (opt) {
  return fetch({
    url: '/v2/login',
    method: 'post',
    data: opt
  })
}