vue封装axios的方式

Posted 2023-06-17 Cxymds

vue封装axios的方式（二）

创建utils\\request.js

import axios from \'axios\'
import  Message, MessageBox  from \'element-ui\'  //导入element-ui组件库
 
// 创建axios的对象
const instance = axios.create(
    baseURL: "https://api.cat-shop.penkuoer.com",  //配置固定域名
    timeout: 5000
)
 
// 请求拦截
// 所有的网络请求都会走这个方法,可以在请求添加自定义内容
instance.interceptors.request.use(
    function (config) 
        config.headers.token = \'123456\' // 请求头添加token值
        config.headers.info = \'lxy\'  //请求头添加info值
        return config
    ,
    function (err) 
        return Promise.request(err)
    
)
 
// 响应拦截
// 此处可以根据服务器返回的状态码做相应的数据
instance.interceptors.response.use(
    function (response) 
        const res = response
        if (res.status === 500) 
            MessageBox.alert(\'系统未登录，请重新登录\', \'错误\', 
                confirmButtonText: \'确定\',
                type: \'error\'
            ).then(() => 
                store.dispatch(\'FedLogOut\').then(() => 
                    location.reload()
                )
            )
            return Promise.reject(\'error\')
         else if (res.errno === 502) 
            MessageBox.alert(\'系统内部错误，请联系管理员维护\', \'错误\', 
                confirmButtonText: \'确定\',
                type: \'error\'
            )
            return Promise.reject(\'error\')
        
    ,
    function (err) 
        return Promise.request(err)
    
)
 
// 封装get和post请求
export function get(url, params) 
    return instance.get(url, params)

 
export function post(url, data) 
    return instance.post(url, data)

 
export default instance;

在src目录下新建api文件夹，在api文件夹中新建index.js用于存放请求接口，也可以根据业务创建多个js文件。

import request from "@/utils/request";  //导入封装请求的js文件
 
export function products(params) 
  return request(
    url: "/api/v1/products",  //接口路径
    method: "get",  //接口方法
    headers:  \'Content-Type\': \'multipart/form-data\' , //给接口添加请求头
    params  //接口参数
  );

 
export function login(data) 
  return request(
    url: "/api/v1/auth/login",
    method: "post",
    data,
    // post请求接口后面拼接参数
    params: 
      currentOpenId: \'currentOpenId\',
      currentCompanyOpenId: \'currentCompanyOpenId\'
    
  );

页面调用接口

<template>
  <div>
    <button @click="get()">封装的get</button>
    <button @click="post()">post</button>
  </div>
</template>
 
<script>
import products,login from "@/api/index"  //导入api目录下的接口文件，并在中写使用的接口
export default 
  methods: 
    get()
      products(name:"lxy",age:18,date: new Date().getTime()).then(res => 
        console.log(\'res\',res.data);
      )
    ,
    post()
      let obj = 
        name:\'lxy\',
        age:18
      
      login(obj).then(res => 
        console.log(\'res\',res.data);
      )
    
  ,
;
</script>