mpvue 사용(3)패키지 axios

1.axios 설치

npm i axios -S

2.httpRequest 라 는 js 파일 을 만 들 고 axios 를 패키지 합 니 다.

import axios from 'axios';
import store from '../store/index'
//    。                       process.env.NODE_ENV
axios.defaults.baseURL = 'xxx';
// http     
axios.interceptors.request.use(config => {
    if (store.state.showLoading) {
        mpvue.showLoading({
            title: '   ',
            mask: true
        });
    }
    return config
}, error => {
    mpvue.showToast({icon:'none',title:'    ,     '})
    return Promise.reject(error)
})
// http     
axios.interceptors.response.use(data => { 
    mpvue.hideLoading();    
    return data
}, error => {
    mpvue.showToast({icon:'none',title:'    ,     '});
    return Promise.reject(error)
})
 axios.defaults.adapter = function (config) {
     let params1 = JSON.stringify(config.params);
    return new Promise((resolve, reject) => {
        mpvue.request({
      url: config.url,
      method: "POST",
      data: {
        data: params1
      },
      //   header: {
      //     token: "xxx"
      //   },
      success: res => {
        return resolve(res.data);
      },
      fail: res => {
        return reject(res.data);
      }
        })
    })
}

/**
 * url:    
 * params:    
 * mthods:    
 * showStatus:    loading
 * */

export default async(url,params,method,showStatus=true) => {
    showStatus && store.commit('SHOWLOADING',showStatus);
    try {
        const response = await axios(url, {params,method});
        return response;
    } catch(error) {
        throw new Error(error)
    }
}

3.getData 라 는 js 파일 을 만 들 고 요청 인 터 페 이 스 를 저장 하여 통일 적 으로 관리 할 수 있 습 니 다.

import Http from './httpRequest'
let serverURL =  'xxx' //    
export const getData = params => Http("/xx/xx", params, false); 

4.페이지 에 인터페이스 파일 을 도입 하고 인터페이스 요청 사용

import { getData } from "@/utils/getData"
methods:{
  getDataList(){
      getData({
          token:token
      }).then(res=>{
          
      }).catch(err=>{
          
      })
  }
}