zoukankan      html  css  js  c++  java
  • 如何封装VUE的axios请求

    index.js

    /* eslint-disable */
    // 对axios做封装,  封装get post
    const axios = require('axios');
    // import qs from 'qs'
    axios.defaults.baseURL = 'http://127.0.0.1:8000';
    axios.defaults.timeout = 10000;
    axios.defaults.withCredentials = true;
    
    /**
     * 设置请求传递数据的格式(看服务器要求的格式)
     * x-www-form-urlencoded
     * 默认提交表单
     * 把数据对象序列化成 表单数据
     */
    // axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    // axios.defaults.transformRequest = data => qs.stringify(data);
    
    /**
     * 设置默认提交 json
     * 把数据对象序列化成 json 字符串
     */
    axios.defaults.headers['Content-Type'] = 'application/json';
    axios.defaults.transformRequest = data => JSON.stringify(data);
    
    
    /**
     * 请求拦截器
     */
    axios.interceptors.request.use(config => {
      // 从localStorage中获取token
      let token = localStorage.getItem('token');
      // 如果有token, 就把token设置到请求头中Authorization字段中
      token && (config.headers.Authorization = token);
      return config;
    }, error => {
      return Promise.reject(error);
    });
    
    /**
     * 响应拦截器
     */
    axios.interceptors.response.use(response => {
      // 当响应码是 2xx 的情况, 进入这里
      // debugger
      return response.data;
    }, error => {
      // 当响应码不是 2xx 的情况, 进入这里
      // debugger
      return error
    });
    /**
     * get方法,对应get请求
     * @param {String} url [请求的url地址]
     * @param {Object} params [请求时携带的参数]
     */
    export function get(url, params, headers) {
      return new Promise((resolve, reject) => {
        axios.get(url, { params, headers }).then(res => {
          resolve(res)
        }).catch(err => {
          reject(err.data)
        })
      })
    }
    
    /**
     * post方法,对应post请求
     * @param {String} url [请求的url地址]
     * @param {Object} params [请求时携带的参数]
     **/
    export function post(url, params, headers) {
      return new Promise((resolve, reject) => {
        axios.post(url, params, headers).then((res) => {
          resolve(res)
        }).catch((err) => {
          // debugger
          reject(err)
        })
      })
    }
    
    export function put(url, params, headers) {
      return new Promise((resolve, reject) => {
        axios.put(url, params, headers).then((res) => {
          resolve(res)
        }).catch((err) => {
          // debugger
          reject(err)
        })
      })
    }
    export function del(url, params, headers) {
      return new Promise((resolve, reject) => {
        axios.delete(url, { data: params, headers }).then((res) => {
          resolve(res)
        }).catch((err) => {
          // debugger
          reject(err)
        })
      })
    }
    export default axios;
    

    调用 apis.js

    /* eslint-disable */
    // 接口信息, 生成请求方法
    // 引入 get方法, post方法
    import axios, { get, post,put,del } from './index'
    
    export const getBooks = (params, headers) => get("/user/bookinfo/", params, headers)
    
    export const addBook = (params, headers) => post("/user/bookinfo/", params, headers)
    
    export const editBook = (params, headers) => put("/user/bookinfo/", params, headers)
    
    export const delBook = (params, headers) => del("/user/bookinfo/", params, headers)
  • 相关阅读:
    mysql优化思路
    mysql列类型选择
    mysql 多列索引的生效规则
    Myisam索引和Innodb索引的区别
    mysql创建远程用户并授权
    mysql 索引长度和区分度
    php 内存共享shmop源码阅读
    短链接系统的算法原理
    PHP die与exit的区别
    MySQL建立外键(Foreign Key)
  • 原文地址:https://www.cnblogs.com/bronyaa/p/12766580.html
Copyright © 2011-2022 走看看