axios

文章目录

Axios

1、安装

bash 复制代码

npm install axios
# 或者
yarn add axios

2、创建axios实例并配置

创建一个文件，例如axiosInstance.js，然后设置基本的axios实例和配置。

js 复制代码

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 你的基础URL
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer YOUR_ACCESS_TOKEN` // 如果需要的话
  }
});

export default instance;

3、添加请求和响应拦截器

在axiosInstance.js配置拦截器

js 复制代码

// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 在发送请求之前做些什么，例如设置token、添加通用头部等
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response.data; // 或者根据需要返回其他内容，例如response.data.data等
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

4、定义一些常用的请求方法

可以在axiosInstance.js中定义一些常用的请求方法

javascript 复制代码

// 例如，定义一个get方法封装
const get = (url, config = {}) => instance.get(url, config);
const post = (url, data, config = {}) => instance.post(url, data, config);
const put = (url, data, config = {}) => instance.put(url, data, config);
const del = (url, config = {}) => instance.delete(url, config); // 注意这里是delete而不是del，JavaScript关键字不能用作变量名。

export { get, post, put, del }; // 导出这些方法供其他文件使用。

5、在其他文件中使用封装的axios实例和方法

javascript 复制代码

import { get, post } from './axiosInstance'; // 根据你的路径调整导入路径

// 使用封装的get方法发送请求
get('/users').then(response => {
  console.log(response); // 处理响应数据
}).catch(error => {
  console.error(error); // 处理错误情况
});

封装axios

1、设置接口请求前缀

根据不同环境（开发、测试、生产）设置不同的请求前缀：

javascript 复制代码

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com';
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com';
}

在 vue.config.js 中配置代理转发以实现跨域：

javascript 复制代码

devServer: {
  proxy: {
    '/proxyApi': {
      target: 'http://dev.xxx.com',
      changeOrigin: true,
      pathRewrite: {
        '^/proxyApi': ''
      }
    }
  }
}

2、设置请求头和超时时间

创建 axios 实例时，配置通用请求头和超时时间：

javascript 复制代码

const service = axios.create({
  timeout: 30000,
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
});

3、封装请求方法

封装 GET 和 POST 请求方法，便于统一管理和使用：

javascript 复制代码

export function httpGet({ url, params = {} }) {
  return new Promise((resolve, reject) => {
    axios.get(url, { params }).then(res => resolve(res.data)).catch(err => reject(err));
  });
}
export function httpPost({ url, data = {}, params = {} }) {
  return new Promise((resolve, reject) => {
    axios({ url, method: 'post', data, params }).then(res => resolve(res.data)).catch(err => reject(err));
  });
}

将封装的方法放在 api.js 文件中，便于统一管理：

javascript 复制代码

import { httpGet, httpPost } from './http';
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params });

在页面中直接调用：

javascript 复制代码

import { getorglist } from '@/assets/js/api';
getorglist({ id: 200 }).then(res => {
  console.log(res);
});

4、添加请求拦截器

在请求拦截器中添加通用逻辑，如设置token：

javascript 复制代码

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  token && (config.headers.Authorization = token);
  return config;
}, error => Promise.reject(error));

5、添加响应拦截器

在响应拦截器中处理通用错误和业务逻辑：

javascript 复制代码

axios.interceptors.response.use(response => {
  if (response.status === 200) {
    // 根据状态码处理业务逻辑
    return Promise.resolve(response.data);
  } else {
    return Promise.reject(response);
  }
}, error => {
  // 处理错误
  return Promise.reject(error);
});