在vue中axios的安装及配置代码示例

前端  /  管理员 发布于 1年前   487

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 

它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。

在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

Axios中文文档：

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 })
    }
}