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)
  • 相关阅读:
    css绘制各种图形,三角形,长方形,梯形
    函数中,对形参做不加var的全局溢出赋值,可改变形参所指向的实参的本身值
    求数组中最大值,最小值
    placeholder 效果的实现,input提示字,获取焦点时消失
    js里apply用法
    jquery.lazyload.js-v1.9.1延时加载插件,已兼容ie6和各大浏览器
    移动端 元素外面使用伪类after加边框 导致其内部元素无法选中
    element组件知识点总结
    常用样式总结
    深入理解iframe
  • 原文地址:https://www.cnblogs.com/bronyaa/p/12766580.html
Copyright © 2011-2022 走看看