目次
git：https：//gitee.com/cxy-xupeng/vue-axios.git
git：https：//gitee.com/cxy-xupeng/vue-axios.git
1.Vueのネットワークリクエスト方法は何ですか
1.ajax
- 構成と呼び出しは非常に混乱します
- コーディングも不快です
2.jquery-ajax
- Vue開発ではjqueryは必要ありません。この方法を使用する場合は、jqueryを具体的に引用する必要があります。
3.表示リソース
- Vueはこれをもう更新しません、隠れた危険があります
4.axios
- これをお勧めします
第二に、axiosの基本的な使用法
1.プロジェクトを作成します
2.axiosをインストールします
npm install axios --save3.axiosの基本的な使用法
axios({
url:'http://123.207.32.32:8000/home/multidata',
method:'get'
}).then(res=>{
console.log(res)
})
axios({
url:'http://123.207.32.32:8000/home/data',
params:{
type:'pop',
page:1
},
method:'get'
}).then(res=>{
console.log(res)
})
3つの同時リクエスト
axios.all([
axios({
url:'http://123.207.32.32:8000/home/multidata',
}),
axios({
url:'http://123.207.32.32:8000/home/data',
params:{
type:'pop',
page:1
},
})])
.then(axios.spread((res1,res2)=>{
console.log(res1)
console.log(res2)
}))
4、axiosグローバル構成
いくつかの固定されたものに対してグローバル構成を行います。
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
5、axiosインスタンス
const instance1 = axios.create({
baseURL:'http://123.207.32.32:8000',
timeout:10000
})
instance1({
url:'/home/multidata',
}).then(res=>{
console.log(res)
})
instance1({
url:'/home/data',
params:{
type:'pop',
page:1
},
}).then(res=>{
console.log(res)
})
6、パッケージモジュール
main.js
//封装request模块
import {request} from './network/request.js'
request({
url:'/home/multidata'
}).then(res=>{console.log(res)}).catch(err=>{console.log(err)})request.js
import axios from 'axios'
export function request(config){
//1.创建axios实例
const instance = axios.create({
baseURL:'http://123.207.32.32:8000',
timeout:5000
})
//2.发送真正的请求
return instance(config)
}
セブン、axiosインターセプター
instance.interceptors.request.use(res=>{
console.log(res)
//(1)config中的一些信息不符合服务器要求
//(2)每次发送网络请求时，显示一个请求的图标
//(3)某些请求必须携带特殊信息(token)
return res
},err=>{
console.log(err)
})
instance.interceptors.response.use(res=>{
console.log(res)
return res.data
},err=>{
console.log(err)
})