axios的封装和使用

axios的封装和使用

一、安装

npm install axios

二、封装并使用

1. 在vue根目录下创建 .env.development（开发环境）、.env.production（生产环境）以及**.env.staging**（测试环境）

   #以开发为例
   #项目名称
   VUE_APP_NAME = "your app name"
   
   #开发环境配置
   VUE_APP_ENV = development
   
   #开发环境请求API
   VUE_APP_BASE_API = /dev-api
   
   #开发环境代理请求目标
   VUE_APP_PROXY_TARGET = "后台请求地址1"
   #VUE_APP_PROXY_TARGET = "后台请求地址2"
   

2. 在utils文件下新建requset.js文件

   import axios from 'axios';
   // 创建axios 实例
   const service = axios.create({
     baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
     timeout: 50000 // request timeout
   });
   
   // 请求拦截器
   service.interceptors.request.use(
     (request) => {
       request.headers['Authorization'] = 'Bearer ' + '后台返回的token'
       return request;
     },
     (error) => {
       return Promise.reject(error);
     }
   );
   
   // 响应拦截器
   service.interceptors.response.use(
     (response) => {
       const res = response.data;
       if (res.code !== 200) {
         // code非 200 操作 书写逻辑
         return Promise.reject(new Error(res.msg));
       } else {
         return res;
       }
     },
     (error) => {
    	// 响应失败所做操作 书写逻辑   
       return Promise.reject(error);
     }
   );
   
   export default service;
   

3. 在vue.config.js中配置代理

   const port = process.env.port || process.env.npm_config_port || 8080; // 端口
   // 端口配置
   devServer: {
     host: '0.0.0.0',
     port: port,
     open: false,
     proxy: {
       [process.env.VUE_APP_BASE_API]: { 
         target: process.env.VUE_APP_PROXY_TARGET, //请求地址
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
         }
       }
     },
     disableHostCheck: true
   },
   

4. 在src目录下创建apis文件夹，apis下创建home文件夹，home文件夹下创建index.js

   import request from "../../utils/request";
   
   // get 请求
   export function banner (params) {
     return request({
       url: '接口拼接地址',
       method: 'get',
       params
     })
   }
   //post 请求
   export function list (data) {
     return request({
       url: '接口拼接地址',
       method: 'post',
       data
     })
   }
   

5. 在vue中使用

   <script>
   import { banner, list } from '../../api/home/index';
   export default {
     name: 'home',
     data(){
       return{
         rotationList:[]
       }
     },
     mounted(){
       this.banner()
     },
     methods:{
       banner(){
         banner().then(res=>{
           this.rotationList = res.data
         })
       }
     }
   }
   </script>