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 リクエストをカプセル化することを検討します。

3 apis.js ファイルの編集

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;
    });
  }

6. Axios と vuex の組み合わせ (プロジェクトではまだ使用されていません。問題がある場合は修正してください)

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
      })
    }
  }
})

コンポーネントでリクエストを送信するときは、this.$store.dispatch を使用して配布する必要があります

methods: {
  getBananer() {
  this.$store.dispatch('saveBanner')  // actions里的方法名
  }
}

非同期読み込みのいくつかのメソッド

1.$.ajax(url[, settings])url: 文字列型のパラメータが必要です (デフォルトは現在のページのアドレス) がリクエストの送信先となります。

タイプ: パラメーターは String タイプである必要があります。リクエスト メソッド (post または get) のデフォルトは get です。

data: サーバーに送信するデータを指定します。

async: リクエストが非同期で処理されるかどうかを示すブール値。デフォルトは true です。

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: ""
     });
   });
 });

2. $.ajax のクロスドメイン リクエストの問題

Ajax によってリクエストされた URL がローカルでない場合、または同じサーバーのアドレスである場合、ブラウザはエラーを報告します: No ' Access-Control -Allow-Origin' ヘッダーが要求されたリソースに存在します... ブラウザーのセキュリティ メカニズムにより、異なるサーバーにある URL アドレスを呼び出すことはできません。これに基づいて、jQuery.ajax は jsonp ソリューションを提供します。サーバーから返されるデータ型を 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"
     });
   });
 });

ただし、jsonp は非公式メソッドであり、このメソッドは get リクエストのみをサポートしており、post リクエストほど安全ではありません。さらに、jsonp はサーバーの協力を必要とし、サードパーティのサーバーにアクセスしていて、サーバーを変更する権限がない場合、この方法は実行できません。

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
 });
}

4. vue-resource のクロスドメイン リクエストの問題

同様に、ブラウザのセキュリティ メカニズムにより、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中写你想要请求数据的地址的域名

4。axios クロスドメイン リクエストの問題は

と同じです。 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
    },

ただし、vue-resource と axios の 2 つのメソッドを使用すると、プロキシ テーブルが報告される可能性があります。 : いいえ 'Access-Control-Allow-Origin' ヘッダーの問題が存在します...バックエンド サーバーが設定と連携する必要があります:

 header("Access-Control-Allow-Origin", "*");
 header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");

以上がaxios 非同期リクエストデータの使用方法（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。