vue単純パッケージaxios
2351 ワード
1、srcでapiフォルダを新規作成し、apiフォルダでconfigを新規作成する.jsファイル
2、config.jsは次のように構成されています.
3、apiフォルダの下にapiを新規作成する.js
4、configを導入する.js
5、ページ要求はapiを導入する必要がある
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)
})
}
}