Axiosはvueプロジェクトでよく使用されます。毎回書き込むのは不便です。特に、構成構成アイテムは公開されており、完全にカプセル化できるため、次回使用するときに直接CVを実行できます。結局のところ、CVダファお香！
- Axiosの基本構成をカプセル化
するrequest.isファイルを作成します。内容は次のとおりです。コメントに説明文を入れます。
import axios from 'axios'
export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
// 设置基础的url配置项，这样接口处的url前面就不用写url:'http://127.0.0.1:8000/api/home'，直接写成 url:'/api/home', 就可以了
baseURL: 'http://127.0.0.1:8000/',
//设置请求超时时间
timeout: 5000
})
// 2.axios的拦截器，用不到的可以忽略这节
// 2.1.请求拦截的作用
instance.interceptors.request.use(config => {
return config
}, err => {
console.log('请求拦截err: '+err);
})
// 2.2.响应拦截
instance.interceptors.response.use(res => {
return res.data
}, err => {
console.log('响应拦截err: '+err);
})
// 3.发送真正的网络请求
return instance(config)
}
- ネットワーク要求をカプセル化します。
関連するすべてのネットワークリクエストをjsに入れることができるので、使用および変更するときに簡単に見つけることができます。getリクエストは比較的単純であり、postリクエストは送信タイプに応じて異なる設定を必要とします。
次に、投稿リクエストの一般的なデータ形式（コンテンツタイプ）について説明します。
コンテンツタイプ：application / json：リクエスト本文のデータはjson文字列の形式でバックエンドに送信されます。これがデフォルトのリクエストデータです。 axiosのタイプ。追加の構成なしで、パラメーターのシリアル化されたjson文字列を渡すだけで済みます。
Content-Type：application / x-www-form-urlencoded：リクエスト本文のデータは通常の形式（キーと値のペア）の形式でバックエンドに送信されます
Content-Type：multipart / form-data：itリクエスト本文のデータをメッセージとして処理し、タグを単位として区切り文字で区切ります。キーと値のペアまたはファイルをアップロードできます。
次の内容でnetwork.jsファイルを作成します。
// 导入封装好的Axios
import {
request} from './request' //注意request.js的相对路径问题
//1. get请求---获取首页的多个数据
export function getHomeMultidata() {
return request({
url:'/api/home',
method:'get',
// 可以带参数也可以不带参数
// params: {
// userName: 'Lan',
// password: '123'
// }
})
}
// 2.1 post请求---传输json数据时，获取电视剧多个数据
export function getTvshowMultidata() {
return request({
url:'/api/Tvshow',
headers: {
'Content-Type': 'application/json'
},
method:'post',
data: {
userName: 'Lan',
password: '123'
}
})
}
//2.2 post请求---传输文件流,表单Form Data 数据时
export function getMovieMultidata() {
return request({
url:'/api/Movie',
headers: {
'Content-Type': 'multipart/form-data';
},
method:'post',
data: {
userName: 'Lan',
password: '123'
}
})
}
- vueで使用：
network.jsで使用する必要のあるメソッドをオンデマンドでscriptタグにインポートします
import {
getHomeMultidata} from "network/home/network"; //导入js，路径自己根据文件位置设置
メソッドで、promiseの形式に従って関数を呼び出します
created() {
// 在方法中调用函数即可
getHomeMultidata().then(
res => {
// 此处res 为返回的数据，将返回的数据进行处理显示
this.banners = res.homedata.slice(0,5)
this.newestData = res.homedata.slice(5,12)
).catch(
err => {
console.log(err)
}
);
},
ネットワーク内で他のネットワークリクエスト方式を使用する方法は上記と同じです。