• vue 3.0 axios 封装过程


    1、搭建好vue框架,引入axios

    2、until文件下创建request.js

    baseURL 配置有时候会产生跨域问题,直接在根目录下的vue.config.js中配置代理可以解决

    import axios from 'axios'
    
    // 创建axios
    const service = axios.create({
      baseURL: '你的请求前缀/api'
    });
    
    // 添加请求拦截器
    service.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      return config;
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    });
    
    // 添加响应拦截器
    service.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      console.log('res',response);
      return response;
    }, function (error) {
      // 对响应错误做点什么
      return Promise.reject(error);
    });
    
    export default service;
    
    

    3、新建api.js文件 笔者这里在until文件下创建这个文件

    import service from "../until/request"
    
    // 获取seller
    export function getSeller(){
      return service.request({
        method:'get',
        url:'/seller',
      })
    }
    
    

    4、调用
    笔者没有将api挂载到vue全局文件上 因为每个都是单独导出,在单个组件中直接按需导入组件

    ...
    import {getSeller} from '../until/api'
    ...
    
    async getData(){
          const {data:res} = await getSeller()
          this.allData = res
          // 数据从小到大排序
          this.allData.sort((a,b)=>{
            return a.value - b.value
          })
        },
    
    
    
  • 相关阅读:
    开放6379端口
    synchronized 实现同步的基础
    pythoning—— 5:实战篇(购物车)
    pythoning ——3、数据类型(字符串)
    pythoning ——2、数据类型(元组、序列)
    pythoning ——1、基础篇
    暗链/黑链
    什么是webshell
    获取当前设备IP
    生成公钥
  • 原文地址:https://www.cnblogs.com/xujinglog/p/13896732.html
Copyright © 2020-2023  润新知