axios 常用配置以及请求方法封装

1.创建实例

axios.create（[配置]）

let FEBS_REQUEST = axios.create({
  baseURL: 'http://134.175.203.212:9529',
  responseType: 'json',
  validateStatus (status) {
    return status === 200  // 200 外的状态码都认定为失败
  }
})

2.请求配置

只有 url 是必需的。如果没有指定 method，请求将默认使用 get方法。详细参考 axios 官网之请求配置

3.响应结构

{
  data: {},     // `data` 由服务器提供的响应
  status: 200,  // `status` 来自服务器响应的 HTTP 状态码
  statusText: 'OK',  // `statusText` 来自服务器响应的 HTTP 状态信息
  headers: {}, // `headers` 服务器响应的头
  config: {},  // `config` 是为请求提供的配置信息
}

4.配置默认值

（1）全局的axios默认值

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

（2）自定义实例默认值

// 创建实例时设置配置的默认值
var instance = axios.create({
  baseURL: 'https://api.example.com'
});
// 在实例已创建后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

（3）配置优先顺序

// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
var instance = axios.create();

// 覆写库的超时默认值
// 现在，在超时前，所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;

// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
  timeout: 5000
});

4.拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 拦截请求
FEBS_REQUEST.interceptors.request.use((config) => {
  ...
  return config
}, (error) => {
  return Promise.reject(error)
})

// 拦截响应
FEBS_REQUEST.interceptors.response.use((config) => {
  return config
}, (error) => {
  ...
  return Promise.reject(error)
})

5.表单提交数据配置请求头

headers: {
  'Content-Type': 'application/x-www-form-urlencoded'
}

6.请求方法

（1）get 方法

const request = {
  get (url, params) {
    // 对 params 数据处理（略）
    return FEBS_REQUEST.get(`${url}${_params}`)
  }
}

（2）post 方法

const request = {
  post (url, params) {
    return FEBS_REQUEST.post(url, params, {
      transformRequest: [(params) => {
        let result = '' // 对 params 数据进行处理（略）
        return result
      }],
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
  }  
}

（3）upload 方法

const request = {
  upload (url, params) {
    return FEBS_REQUEST.post(url, params, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
  }
}

（4）download 方法

const request = {
  download (url, params, filename) {
    message.loading('文件传输中')
    return FEBS_REQUEST.post(url, params, {
      transformRequest: [(params) => {
        let result = ''
        return result
      }],
      responseType: 'blob'
    }).then((r) => {
      const content = r.data
      const blob = new Blob([content])
      if ('download' in document.createElement('a')) {
        const elink = document.createElement('a')
        elink.download = filename
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      } else {
        navigator.msSaveBlob(blob, filename)
      }
    }).catch((r) => {
      console.error(r)
      message.error('下载失败')
    })
  },
}

在 main.js 中， 添加

Vue.prototype.$post = request.post
Vue.prototype.$get = request.get
Vue.prototype.$download = request.download
Vue.prototype.$upload = request.upload

在组件中如何使用呢？

handleUploadOk (val) {
  let formData = new FormData()
  formData.append('file', val[1][0]);
  formData.append('fileType', val[0].roomType)
  this.$upload('fileInfo/import', formData).then((r) => {
    console.log(r)
  }).catch(err => {
    console.error(err)
  })
},

更多详细配置，请查看 axios 官网

---

20210221 更新~~

请求头数据处理。

headers.split('\r\n').forEach(line => {
  let [key, ...vals] = line.split(':')
  key = key.trim().toLowerCase()
  if (!key) {
    return
  }
  let val = vals.join(':').trim()
  parsed[key] = val
})