技术贴

mpvue中配置axios使用

2020-03-24  本文已影响0人  zhudying

mpvue中使用axios

1.api的index.js文件下配置axios
import axios from 'axios';
/**
 * axios配置
 */
// 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': 'xxx',
        '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);
  }
}
2.api下新建page文件封装请求函数
import axios from './index'

export const getMessage = (params) => axios("http://xxx", params, 'post')
3.在页面引用请求函数
import { getMessage } from '@/api/page.js'
async handler () {
      let res = await getMeaasge({})
      console.log(res, 'res')
}
上一篇下一篇

猜你喜欢

热点阅读