vueリクエストaxioの使用詳細
11402 ワード
vueリクエストaxioの使用詳細取付 npm install axios axiosインスタンス を作成する axioのブロッキング 対要求ブロック 応答に対するブロック 使用形態 はmainにグローバルに使用する.js(メインエントランス)中
要求されたjsファイルを管理するためのapiフォルダを新規作成し、フォルダ内でブロック化し、jsファイル
import axios from 'axios'
// ， ， ，
const host = process.env.NODE_ENV === "development"? " " : " "
axios.defaults.withCredentials = true // cookie
axios.defaults.crossDomain = true;// axios
axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8'//
const ajax = axios.create({
basURL:host,
timeout: 6000,//
})
ajax.interceptors.request.use((req)=>{
// ，
loading
return req
})
ajax.interceptors.response.use((res)=>{
// ，
loading
return res.data.body
})
export default ajax//
import * as $http from './requests'
Vue.protoype.$http = $http
this $http ajax
// api.js
import request from '@/utils/request' // ajax
// 2
export const getData= （params）=>{ //get
request.get('data/user', {
params: {
ID: params
}
})
}
expot const getData2 = (params) =>{ //post
request.post('data/user', {
...params
})
}
//
export function getData3(data) { //post
return request({
url: 'data/list',
method: 'post',
data: { ...data }
})
}
export function getData4(id) { //get
return request({
url: 'data/one?id=' + id,
method: 'GET'
})
}
<script>
import { getData, getData2, getData4 } from '@/api/api'
export default {
data() {
return {
}
}，
methods: {
const params = ' '
getData(params)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
</script>