封装axios

安装axios
npm install axios --save
根目录下创建api文件夹,在api文件夹下创建network.js和index.js文件:
在network.js对axios进行全局配置并封装:
// 导入axios
import axios from 'axios';

// 进行一些全局配置
// 公共路由(网络请求地址)
const baseUrl = {
    dev: "xxxxxx",
    pro: "XXXXXX"
}
axios.defaults.baseURL = process.env.NODE_ENV === "development"
    ? baseUrl.dev
    : baseUrl.pro;
// 请求响应超时时间
axios.defaults.timeout = 5000;

// http request 拦截器 请求拦截器
axios.interceptors.request.use(
    config => {
        // const token = getCookie('名称');注意使用的时候需要引入cookie方法,推荐js-cookie
        // config.data = JSON.stringify(config.data)
        config.data = JSON.stringify(config.data)
        config.headers = {
            // 'Content-Type': 'application/x-www-form-urlencoded'
            'Content-Type': 'application/json;charset=UTF-8'
        }
        // if(token){
        //   config.params = {'token':token}
        // }
        return config
    }, error => {
        return Promise.reject(error)
    }
)
// 响应拦截器
axios.interceptors.response.use(response => {
    return Promise.resolve(response.data)
}, error => {
    // 错误信息
    console.log(error.response.data.message || "undefined");
    return Promise.reject(error)
});

// 封装自己的get/post方法
export default {
    get: function (path = '', data = {}) {
        return new Promise(function (resolve, reject) {
            axios.get(path, {
                params: data
            })
                .then(function (response) {
                    // 按需求来,response.data || response
                    resolve(response);
                })
                .catch(function (error) {
                    reject(error);
                });
        });
    },
    post: function (path = '', data = {}) {
        return new Promise(function (resolve, reject) {
            axios.post(path, data)
                .then(function (response) {
                    resolve(response);
                })
                .catch(function (error) {
                    reject(error);
                });
        });
    }
};
index.js:专门用于管理请求各种接口地址,配置相应代码:
// 导入封装好的网络请求类工具
// 两种方式(如果封装自己的get/post方法,只能用第一种)
import Network from './network';
//import axios from 'axios';

// 封装各种接口请求
export const name = (params) => Network.get('api/statistic', params);

// export const name = (params) => {
//     return axios.request({
//         url: 'api/statistics',
//         method: 'get',
//         params: params
//     })
// }
使用:
import { name } from "@/api/index";

name(params).then((res)=>{
  console.log(res)
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise...
    张先觉阅读 1,818评论 1 12
  • axios安装 npm install axios --save 首先在src目录下创建axios文件夹,然后创建...
    N_bcde阅读 457评论 0 0
  • 照例先贴上 axios 的 gitHub 地址 不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是...
    落叶追风阅读 10,291评论 25 60
  • 原文:掘金-楞锤-vue中Axios的封装和API接口的管理 安装 引入 src/request/http.js:...
    你喜欢吃青椒吗_c744阅读 878评论 2 17
  • 前言 axios 是一个轻量的 HTTP客户端,它基于 XMLHttpRequest 服务来执行 HTTP 请求,...
    champyin阅读 1,286评论 0 9