Vue + Axios 请求接口方法与传参方式详解

一、Axios 安装及引用
安装 npm install axios

在main.js种引用

import axios from 'axios';

Vue.use(axios);

二、Axios使用方式示例

1. Get请求：
   Get请求比较简单，通常就是将参数拼接到url中 用? &连接或者用下面这种方式：

axios.get('url',{
    params:{
        id:'接口配置参数（相当于url?id=xxxx）'，
    },
})
.then((res)=>{
    console.log(res);   //  处理成功的函数 相当于success
})
.catch((error)=>{
    console.log(error)  //  错误处理 相当于error
})`

2. Post请求

const data = {
    name:'张三',
    age:23
}
axios.post('url',data)
.then((res)=>{
    console.log(res);   //  处理成功的函数 相当于success
})
.catch((error)=>{
    console.log(error)  //  错误处理 相当于error
  }

三、封装
接口api.js（结合下面的request.js使用）

// 接口
import  request  from './request.js'
export function POST(url,search,headers) {
    const data = {data: search}
    return request({ url, data, method:'post',headers})
}
export function GET(url,search,headers) {
    const data = {data: search}
    return request({ url, data, method:'get',headers});
}

ps：
1、请求方法为post时，参数需要通过qs.stringify函数进行格式转换
安装qs插件，项目根目录执行命令：
npm安装：npm install qs --save
yarn安装：yarn add qs

2、axios配置，设置请求头：Header
Accept: text/plain, text/html --指定客户端能够接收的内容类型
Content-Type：Content-Type: application/x-www-form-urlencoded --请求的与实体对应的MIME信息

出现使用POST请求方式给TP接口传参失败的问题原因：

主要原因是发送的数据格式不对。
Vue的axios传参方式是requestpayload，参数格式是json，而通过payload形式的数据php $_post无法接受前端提交的数据，要想后端接受post提交的数据，就要进行参数设置，提交的数据形式变为：Form Data。
PPOS表单请求提交时，使用的Content-Type是application/x-www-form-urlencoded，而使用原生AJAX的POST请求如果不指定请求头RequestHeader，默认使用的Content-Type是text/plain;charset=UTF-8，Content-Type是

Content-Type: application/json; charset=utf-8

指定客户端能接受的内容类型 一般在全局的封装request中：
(这里单独封装了一个request.js)

import axios from 'axios';
import qs from 'qs';
//请求拦截器
// 设置api域名

const service = axios.create({
    timeout: 30000, //请求超時時间
})
service.interceptors.request.use(
    config => {
      config.baseURL = window.langApi;
      //在请求之前做点什么
      const configData = {
          ...config.data.data,
      };
      config.headers = {
          ...config.headers,
        'Content-Type': 'application/x-www-form-urlencoded',
        'APP-VERSION': '1.0.6',
        PLATFORM: 'WEB',
        'APP-NAME': 'art',
        ...config.headers,
          // 'USER-UID': window.userinfo.pfid,
          // 'USER-TOKEN': window.userinfo.token
      }
    !config.headers.locale && !config.headers.LOCALE && (config.headers.LOCALE = locale.value.replace(/-[^$]+/, ''));
    if (window.apiHeaders !== false) {
      Object.assign(config.headers, window.apiHeaders);
    }
    config.method.toLowerCase() === 'post' && config.headers['request-type'] !== 'file'
      ? (config.data = qs.stringify(configData))
      : (config.params = configData);
    // Indicator.open();
    return config;
    },

    error => {
      //请求错误处理
      return Promise.reject(error)
    }
)

//响应拦截器
// Indicator.close(),
service.interceptors.response.use(
    response => {
        // Indicator.close();
        response.data.ret_code = ~~response.data.ret_code;
        //向接口添加服務器時間戳
        if (response.headers.date && !response.data.time) {
            response.data.time = new Date(response.headers.date).getTime() / 1000;
        }
        return response.data;
    },
    error => {
        var err;
        if (error.message.indexOf('timeout') + 1) {
            err = {
                ret_code: 99999,
                ret_msg: 'Request Timeout'
            };
        } else if (5 === ~~(error.request.status / 100)) {
            err = {
                ret_code: error.request.status,
                ret_msg: 'Network Error'
            };
        } else {
            err = JSON.parse(error.request.responseText);
            err.ret_code = ~~error.request.status;
        }
        return Promise.reject(err);
    }
)
export default service

四、组件使用

<template>
	<section>
	<div @click="postEvent()">使用POST</div>
	</section>
</template>
<script>
 import {POST} from "@/service/api";
 export default {
 	name: 'App',
 	data(){
        return {}
     },
     methods:{
     	postEvent() {
     	const data = {
		    name:'张三',
		    age:23
		}
     	POST('url',data).then(res=>{
                if(res.ret_code===0){
                 console.log(res);   //  成功
                }else{
                 console.log(res.ret_msg);//失败
                }
            }).catch(err=>{
                console.log(err.ret_msg);//失败
            });
     	}
     }
 }
</script>
<style lang="scss">
</style>