序文
最近、リクエストのカプセル化にaxiosを使用してreactプロジェクトを作成しました。ここに記録します。これが、初心者の助けになることを願っています。
準備オーケー
リクエストを行うにはaxiosを使用する必要があるため、最初にaxiosをインストールしていることを確認し、package.jsonファイルを確認してください。
そうでない場合は、最初にaxiosをインストールしてください。
npm install axios
axiosのパッケージ化を開始
まず、srcディレクトリに新しいaxiosフォルダを作成します。ここでは、config.jsとrequest.jsの2つの新しいファイルを作成します。
config.js
このファイルは、基本的な構成と開発環境を区別するために使用されます。
- devBaseUrl開発環境とproBaseUrl本番環境を定義します
- process.envを使用して、開発環境と本番環境を区別します。これにより、ユーザーを含む環境情報が返されます。
- 最後にタイムアウトを設定します
const devBaseUrl = 'http://api.k780.com/'
const proBaseUrl = 'http:xxx//xxxx.xx.com'
export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseUrl : proBaseUrl
export const TIMEOUT = 5000
request.js
対応するカプセル化メソッドとインターセプターを保存します。
- まず、axiosとconfigで上記で記述したBASE_URL、TIMEOUTをインポートします
- オブジェクトを格納するinstance=axios.create（{}）を定義します
- トークンの検証やその他の操作を実行できるリクエストインターセプターを作成します
import axios from 'axios'
import {
BASE_URL, TIMEOUT } from './config'
const instance = axios.create({
baseURL: BASE_URL,
timeout: TIMEOUT
})
// 请求拦截器
instance.interceptors.request.use(config => {
console.log('被拦截做一些操作')
return config
}, err => {
return err
})
export default instance
リクエストする
上記のカプセル化が完了すると、リクエスト操作を実行できます。使用するページが表示されたら、
最初に作成したリクエストファイルをインポートします。
import request from '../../axios/request'
ここでリクエストしているのは、インターネット上の天気インターフェースです。アドレスは、上記のconfig.jsファイルのdevBaseUrlに書き込まれています。api
リクエストの場合、componentDidMount（）ライフサイクルで非同期リクエストを行います。
- asyncawaitを使用した非同期操作
- データを使用してリクエストの結果を受け取り、リクエストに必要なparamsパラメータをリクエストに書き込みます
- 最後に、データを出力して結果を確認し、setStateを使用して値を変更します
async componentDidMount() {
const data = await request({
// 参数
params: {
app: 'weather.today',
weaId: 248,
appkey: 10003,
sign: 'b59bc3ef6191eb9f747dd4e83c99f2a4',
format: 'json'
}
})
console.log(data)
this.setState({
weather: data.data.result.weather})
}
印刷結果を見る：
リクエストされたデータを見ることができます。これはリクエストが成功したことを意味します。
ここではオンライン天気の無料インターフェースを使用しています。インターフェースの使用については、リンクNowapiを確認してください。
わかりました、この記事はここにあります。それがあなたに役立つなら、あなたはそれを好きで、フォローして、サポートすることができます。ありがとう~~
私は将来もっと多くのフロントエンドの知識コンテンツを持ってきます。