vue 使用axios

Posted 2020-11-22 LPEIL

本文主要记录在vue项目中使用axios插件

Axios 是一个基于 promise 的 HTTP 库，并没有install方法，所以是不能使用vue.use()方法的。

axios中文文档：https://www.kancloud.cn/yunye/axios/234845

1.需要下载axios插件

npm install axios

2.项目中的引用（main.js中引用）

import axios from ‘axios‘

3.项目中关于axios的自定义

　　新建一个axios.js文件（可以新建一个plugins文件夹）　

"use strict";

import Vue from ‘vue‘;
import axios from "axios";

let config = {
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 20 * 1000, // Timeout
  // responseType: ‘json‘,// responseType 表示服务器响应的数据类型
  withCredentials: true, // 
  transformRequest: [function (data) {
　　
  }],
};
const _axios = axios.create(config);   //创建一个axios实例
//添加请求拦截器
_axios.interceptors.request.use(
  function (config) {
    // Do something before request is sent
    return config;
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
_axios.interceptors.response.use(
  function (response) {
    // Do something with response data
    return response.data;
  },
  function (error) {
    // Do something with response error
    return Promise.reject(error);
  }
);

export default _axios;

注意：post请求参数放在data里面，get请求参数放在params里。

具体调用：　

import _axios from ‘./axios.js‘

export const getPersonInfo = data => {
    return _axios ({ 
　　 url: ‘/person_pay/getpersoninfo‘,
 　　method: ‘post‘,
 　　data }) 
}

4.补充知识点

　　Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

　　

const object1 = {
  a: 1,
  b: 2
};
const object2={
   b:4,
   c:5
}
Object.assign(object1,object2)
console.log(object1) //object1={a:1,b:4,c:5}