axios模块化封装实例化及vue本地解决跨域方案

非常感谢您的提问，下面是关于“axios模块化封装实例化及vue本地解决跨域方案”的完整攻略。

什么是axios？

Axios 是一个基于 promise 的 HTTP 库，可以用于浏览器和 node.js 中的 AJAX，其语法简单易懂，可以在客户端和服务端轻松使用。

axios的使用方法

安装axios：

我们可以采用 npm 安装 axios，使用命令：

npm install axios --save

引入axios：

安装完成后，在项目入口文件中引入 axios：

import axios from 'axios';

axios请求方式

• GET 请求

axios.get('/api/getUserInfo', {
params: {
id: 123
}
}).then(res => {
console.log(res.data);
}).catch(err => {
console.log(err);
})

• POST 请求

axios.post('/api/submitData', {
name: 'test',
age: 20
}).then(res => {
console.log(res.data);
}).catch(err => {
console.log(err);
})

axios模块化封装

在实际项目中，我们往往需要对 axios 进行封装，以便于统一管理请求拦截、响应拦截、统一返回值处理等操作，下面是一个简单的封装示例：

// api.js

import axios from 'axios';

const service = axios.create({
  baseURL: '/api',
  timeout: 5000 // 超时时间
});

// 请求拦截
service.interceptors.request.use(config => {
  // 在此处添加token等认证信息
  return config;
}, err => {
  return Promise.reject(err);
})

// 响应拦截
service.interceptors.response.use(res => {
  const code = res.data.code;
  if (code === 200) {
    return res.data.data;
  } else {
    // 在此处处理错误信息
    return Promise.reject(res);
  }
}, err => {
  return Promise.reject(err);
})

export default service;

axios实例化

为了更好的管理 axios 请求，我们可以使用实例化创建多个 axios 实例，下面是一个简单的实例化示例：

// api.js

import axios from 'axios';

const service1 = axios.create({
  baseURL: '/api1',
  timeout: 5000 // 超时时间
});

const service2 = axios.create({
  baseURL: '/api2',
  timeout: 5000 // 超时时间
});

export {
  service1,
  service2
};

vue本地解决跨域方案

我们知道，由于浏览器同源策略的限制，不能跨域访问接口，但是在开发过程中，我们往往需要访问不同的接口，这时候我们可以在接口的后面加上一个代理来解决跨域问题。

我们可以在项目根目录的 vue.config.js 文件中配置跨域代理，下面是一个简单的配置示例：

module.exports = {
  devServer: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

这样，我们就可以在本地开发时，使用 http://localhost:3000/api 访问 http://localhost:8080 服务端提供的接口，本地运行的 vue 项目就可以解决跨域问题了。

希望我的回答能够帮到您，如果您还有什么不懂得地方，请随时向我提出。