axios在vue项目中的一种封装方法

记录下之前领导封装的axios请求

npm install axios // 安装

单独写个文件配置axios，此处为request.js

import axios from 'axios'

//自定义配置新建一个axios实例
const http = axios.create({
    // baseURL: 'https://...' 
    // baseURL: process.env.BASE_API,
    timeout: 5000, //
    // headers: {'x-Request-with': '*'}//自定义请求头
    // ....
})
// 添加请求拦截器
http.interceptors.request.use(config => {
    // 请求前设置请求头
    config.headers['Access-Control-Allow-Origin'] = '*'
      // config.headers['Authorization'] = getToken()
      // config.headers['Actcode'] = getCode()
      return config
},error => {
    console.log(error, '888')//请求错误 do something
    return Promise.reject(error)
})
// 响应拦截器
http.interceptors.response.use(response => {
    return response
}, error => {
    console.log(error, '888')//返回消息后 do something
    return Promise.reject(error)
})
export default http  // 记住此处
// axios 依赖原生的 ES6 Promise
// 低版本浏览器不支持es6语法，使用垫片
// import promise from 'es6-promise' 需安装
// promise.polyfill()

然后api.js 配置请求时的方法

import http from '@/http/request'

export function yiyuan (showapi_appid, showapi_sign) { //方法名 yiyuan
    const pass = {showapi_appid, showapi_sign}
    return http({
        url: 'http://route.showapi.com/60-27',
        method: 'post',
        data: pass
    })
}

页面中使用的时候直接 引入方法

import {yiyuan} from '@/api' 

使用：
let pass = {}
yiyuan(pass).then().catch()

 够不够简单（#手动滑稽#）

转载于:https://www.cnblogs.com/laine001/p/9817612.html