封装vue-axios请求

util.js

import axios from 'axios';
import qs from 'qs';
import { Toast } from 'vant'; //h5用的这个

const ApiUrl='xxxxxxxx'  //访问接口地址

//设置超时时间 请求头等
axios.defaults.timeout = 30000;
axios.defaults.headers.head['Access-Control-Allow-Origin'] = '*';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;application/json;charset=UTF-8';
// Content-Type: application/json ： 请求体中的数据会以json字符串的形式发送到后端
// Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端
// Content-Type: multipart/form-data： 它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

// url是域名后面的短链接，data是一个对象

export function post(url, data) {
    return new Promise((resolve, reject) => {
        axios.post(ApiUrl+url, qs.stringify(data))
            .then(response => {
                if (response.data.status == 1) {
                    resolve(response.data);
                } else {
                    console.log(response.data)
                    Toast(response.data.info)
                    reject(response.data)
                }
            }, err => {
                reject(err)
            })
    })
}

request.js

//引入util中的post
import {post} from '../util/index'

export function Test(query) {
  return post('xxxxx',query)
}

test.vue

import {Test} from "@/api/request";
 methods: {
    getData() {
        let data={
        time:0,
        num:1
        }
    Test(data).then(res=>{
    console.log(res)
    })
  },
}