vue 使用axios

Posted LPEIL

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 使用axios相关的知识,希望对你有一定的参考价值。

本文主要记录在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}

 

以上是关于vue 使用axios的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

vue中axios请求成功了如何把数据渲染到页面上?

回归 | js实用代码片段的封装与总结(持续更新中...)

vue项目axios的使用实例详解

Vue-Select:如何将此 fetch() 代码转换为使用 axios?

如何在 Vue (Typescript) 中使用 axios?