vue単純パッケージaxios

2351 ワード

1、srcでapiフォルダを新規作成し、apiフォルダでconfigを新規作成する.jsファイル
2、config.jsは次のように構成されています.
import axios from 'axios';
import qs from 'qs'

//mint UI   ,          
import {Indicator, Toast} from 'mint-ui'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

axios.defaults.baseURL = 'http://testweb.fishing.tianenfishing.cn/fishweb';

//        
axios.interceptors.request.use(config => {
  Indicator.open({
    text: '   ...',
    spinnerType: 'fading-circle'
  })
  return config
},
err => {
  Indicator.close()
  Toast({
    message: '    ',
    position: 'middle',
    duration: 3000
  })
  return Promise.reject(err)
})
 
//        ,       then/catch      
axios.interceptors.response.use(response => {
  let timetp = null
  clearTimeout(timetp)
  timetp = setTimeout(() => {
    Indicator.close()
    clearTimeout(timetp)
  }, 500)
  //        data     
  return response.data
},
error => {
  return Promise.reject(error);
  //             
  // promise.resolve("ssss")
})

//    Promise
export function fetch(url, params,type) {
  return new Promise((resolve, reject) => {
    if(type=='post'){
      axios.post(url, qs.stringify(params))
      .then(response => {
          resolve(response.data);
      }, err => {
          reject(err);
      })
      .catch((error) => {
          reject(error)
      })
    } else{
      axios.get(url,{params})
      .then(response => {
          resolve(response.data);
      }, err => {
        reject(err);
      })
      .catch((error) => {
          reject(error)
      })
    }   
  })
}

3、apiフォルダの下にapiを新規作成する.js
4、configを導入する.js
import {fetch} from './config'
export default {
    bindAccount (params) {return fetch(`user/bind`, params, 'post')}
}

5、ページ要求はapiを導入する必要がある

import api from '@/api/api';
export default {
    methods: {
        let params = {
        name: this.name,
        mobile: this.phone,
        code: this.code
      }
      api.bindAccount(params).then((res) => {
        console.log(res)
      }).catch((error) => {
        console.log(error)
      })
    }
}