安装axios并配置到vue中

中文文档：https://www.axios-http.cn/docs/intro

通过npm安装

npm install axios

全局配置axios

在src目录下创建service

service目录下创建3个文件，分别是：axios.js和index.js和service.js

axios.js：

import axios from "axios";

const initAxios = axios.create({
  timeout: 1800000//数据响应过期时间
})

//请求拦截器
initAxios.interceptors.request.use((config) => {
  //在发送之前做点什么
  return config
}, (error) => {
  //对请求错误做点什么
  return error
})

//响应拦截器
initAxios.interceptors.response.use((response) => {
  return response.data
  // if (response.resultCode === 200 ) {
  //   return response.data
  // } else {
  //   return {resultCode: -1}
  // }
})
//导出
export default () => initAxios

index.js：

//引入封装好的 service
import service from "@/service/service";

//声明一个基础接口变量
let baseURL;

//配置开发环境
if (process.env.NODE_ENV === 'development') {
    baseURL = 'http://localhost/';
}

// 配置生产环境
if (process.env.NODE_ENV === 'production') {
    baseURL = 'http://www.hongzhan.com/';
}

//设置请求头（如果请求头统一的话可以在axios文件设置，则无须从这里传过去）
const header = {
    Accept: 'application/json;charset=UTF-8',
}

//根据自身需求
let _service = {
    getIndex(data) {
        const url = baseURL + 'back/page/index.php';
        return service.get(url, data, header);
    }
}

//导出
export default _service

service.js

//引入封装好的 axios
import Axios from './axios'

//实例化
const instance = Axios()

//创建需要的请求方法:get post put delete
//url:请求的接口地址
//params:请求参数
//headers:请求头
export default {
    get(url, params, headers) {
        return instance.get(url, { params, headers })
    },
    post(url, params, headers) {
        return instance.post(url, params, { headers })
    },
    put(url, params, headers) {
        return instance.put(url, params, { headers })
    },
    delete(url, params, headers) {
        return instance.delete(url, { params, headers })
    }
}

本作品采用《CC 协议》，转载必须注明作者和本文链接