ホームページ > 記事 > ウェブフロントエンド > axios 非同期リクエストデータの使用方法(コード例)
この記事の内容は、axios での非同期リクエスト データの使用に関するものです (コード例)。必要な方は参考にしていただければ幸いです。
Mock を使用してバックエンド データをシミュレートした後、データのロードをリクエストしてみる必要があります。データリクエストには Axios が選択されましたが、現在は axios の使用が推奨されています。
axios (https://github.com/axios/axios) は以下に基づいています Promise 用の HTTP ライブラリ。公式 Web サイトのドキュメントで紹介されているように、npm i 後は、必要なコンポーネントにロードするだけです。個人的には、コーディングの魅力は、問題を解決する方法が複数あることだと思います。あなたの開発環境ではこの方法が問題ない場合もあります。そのため、さまざまな問題があり、その解決方法を疑問視する必要があります。も多様です。
axios の開始
1.
npm i axios -S
2 を src にインストールします。新しい apis.js ファイルを作成し (プロジェクトが徐々に改良されていくと、API インターフェースが追加されます。もちろん、axios.js という名前を付けることもできます。この名前は他の人が理解できるようにするためのものです)、# を導入します。 ##
import axios from 'axios';その後、apis.js ファイルを編集し、axios.get または post リクエストをカプセル化することを検討します。
import axios from 'axios'; const Domain = "http://localhost:8080"; // 定义根域名 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 设置post默认的请求头 // 封装 post 请求 export function post(action, params){ return new Promise((resolve, reject) => { // url 判断是测试环境 就要拿 测试环境的域名, 正式环境的就要用 正式域名 let url = Domain + action; axios.post(url, params) .then(response => { resolve(response.data) }) .catch(error => { reject(error) }) }); } // 封装 get 请求 export function get(action, params){ return new Promise((resolve, reject) => { axios.get(Domain + action, params) .then(response => { resolve(response.data) }) .catch(error => { reject(error) }) }); } export default { postData(action, params){ return post(action, params) }, getData(action, params){ return get(action, params) } }
4. 必要なコンポーネントの参照 # import api from '../../apis.js';
export default {
name: "banner",
data() {
return {
bannerList: []
};
},
created(){
this.getBanner(); // 在页面渲染完成即加载
},
methods: {
getBanner(){
this.$api.getData('/getBanner').then(val => {
this.bannerList = val.imgs;
});
}
}
}
5. グローバル設定 axios
在入口文件main.js中引入,之后挂在vue的原型链上: import api from './apis.js'; Vue.prototype.$http = api; 在组件中使用: getBanner(){ this.$http.getData('/getBanner').then(val => { this.bannerList = val.imgs; }); }
vuex ウェアハウス ファイル store.js とアクション追加メソッドを使用します。アクションには非同期操作を含めることができ、アクションを通じて変更を送信できます。アクションには固有のパラメーター コンテキストがありますが、コンテキストはステートとゲッターを含むステートの親です
import Vue from 'Vue' import Vuex from 'vuex' import axios from 'axios' Vue.use(Vuex) export default new Vuex.Store({ // 定义状态 state: { banners: { name: 'pic' } }, actions: { // 封装一个 ajax 方法 saveBanner (context) { axios({ method: 'get', url: '/getBanner', data: context.state.banners }) } } })
methods: { getBananer() { this.$store.dispatch('saveBanner') // actions里的方法名 } }非同期読み込みのいくつかのメソッド
1.$.ajax(url[, settings])url: 文字列型のパラメータが必要です (デフォルトは現在のページのアドレス) がリクエストの送信先となります。
タイプ: パラメーターは String タイプである必要があります。リクエスト メソッド (post または get) のデフォルトは get です。 dataType: パラメーターは文字列型である必要があり、サーバーによって返されることが予期されるデータ型です。
contentType: パラメーターは文字列型である必要があります。サーバーに情報を送信する場合、コンテンツのエンコーディング タイプはデフォルトで「application/x-www-form-urlencoded」になります。
成功: パラメーターは関数タイプである必要があり、リクエストが成功した後にコールバック関数が呼び出されます。
エラー: 関数タイプのパラメーター。リクエストが失敗した後にコールバック関数が呼び出されます。
jsonp: コールバック関数の文字列を jsonp に書き換えます。
$(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json", data: {username:$("#username").val(), content:$("#content").val()}, dataType: "json", success: function(data){ // handle success } error: function(data){ // handle error } jsonp: "" }); }); });
$(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json", data: {username:$("#username").val(), content:$("#content").val()}, dataType: "jsonp", // jsonp格式 success: function(data){ // handle success } error: function(data){ // handle error } jsonp: "callback" }); }); });
3. vue フレームワークの vue-resource
ue-resource は、XMLHttpRequest または JSONP を通じてリクエストを開始し、応答を処理できます。 vue-resource はサイズが小さく、主流のブラウザをサポートします。ただし、vue は 2.0 以降は更新されなくなります。You Dashen は axios の使用を推奨します。
{ // GET /someUrl this.$http.get('/someUrl').then(response => { // get body data this.someData = response.body; }, response => { // error callback }); }
同様に、ブラウザのセキュリティ メカニズムにより、vue-resource もクロスドメイン リクエストの問題に直面します。解決策は次のとおりです: vue プロジェクトの下の config/index.js ファイルでプロキシ テーブルを構成します:
dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { // 新增,解决跨域请求问题 '/api': { target: 'http://192.168.1.103:8080/', changeOrigin: true, pathRewrite: { '`/api': '/' } }, secure: false }, target中写你想要请求数据的地址的域名
と同じです。 vue プロジェクト内の vue-resource プロキシ proxyTable は、config/index.js ファイルの次の場所に設定されています:
dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { // 新增,解决跨域请求问题 '/api': { target: 'http://192.168.1.103:8080/', changeOrigin: true, pathRewrite: { '`/api': '/' } }, secure: false },
header("Access-Control-Allow-Origin", "*"); header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
以上がaxios 非同期リクエストデータの使用方法(コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。