如何在mpvue中使用axios发送请求

如何在mpvue中使用axios发送请求

1，首先npm下载

npm install axios -s

2，在api文件夹下创建index.js

import axios from 'axios';
var CusBase64 = require('@/utils/base64.js');  //此处做了一个token 若是没有也可以去掉
/**
 * axios配置
 */
let tokenHeader = mpvue.getStorageSync('token');
var _authtoken = CusBase64.CusBASE64.encoder(tokenHeader); //此处做了一个token 若是没有也可以去掉
// axios请求拦截器
axios.interceptors.request.use(config => {
  //to do something...
  return config;
}, error => {
  mpvue.showToast({ icon: 'none', title: '网络繁忙,请稍后重试' });
  console.log(error, 'error')
  return Promise.reject(error);
})
// axios响应拦截器
axios.interceptors.response.use(data => {
  //to do something...
  mpvue.hideLoading();
  return data;
}, error => {
  mpvue.showToast({ icon: 'none', title: '网络繁忙,请稍后重试' });
  console.log(error, 'error2')
  return Promise.reject(error);
})

//axios自定义请求
axios.defaults.adapter = function (config) {
  return new Promise((resolve, reject) => {
    mpvue.request({
      url: config.url,
      data: config.params,
      method: config.method,
      header: {
        'Authorization':  "Basic " + _authtoken , // _authtoken 此处做了一个token 若是没有也可以去掉
        
        'Content-Type': 'application/json; charset=UTF-8'
      },
      success: (res) => {
        return resolve(res);
      },
      fail: (res) => {
        return reject(res);
      }
    })
  })
}

/**
 * url:请求地址
 * params:请求参数
 * mthods:请求方法
 * */

export default async (url, params, method) => {
  try {
    const response = await axios(url, { params, method });
    return response;
  } catch (error) {
    throw new Error(error);
  }
}

3，单独新建一个文件写接口 api/page.js

import axios from './index'

export const getMessagePost = (params) => axios("http://xxx", params, 'post')
export const getMessageGet = (params) => axios("http://xxx", params, 'get')

4,在页面中使用

<template>
	<button  @click="clickSend()">点击发送post请求</button>
</template>
<script>
import {getMessagePost} from '@/api/page'
methods: {
	async clickSend() {
	     let res = await getMessagePost(
	       {
	           "ID":0
	       }
	     )
	     console.log(res)
	 }
 }
</script>