axios非同步請求資料的使用（程式碼範例）

這篇文章帶給大家的內容是關於axios非同步請求資料的使用（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

使用Mock模擬好後端資料之後，就需要嘗試請求載入資料了。資料請求選擇了axios，現在都推薦使用axios。

axios（https://github.com/axios/axios）是基於 promise 的 HTTP 函式庫。如官網文檔介紹，npm i 之後，在需要的元件中載入就可以了。個人認為，編碼的魅力在於，解決問題的方法不只一種，有時候這個方法在你的開發環境下ok，在我的開發環境下卻不ok，所以，問題是各式各樣的，而解決問題的方法也是百花齊放的。

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中引用，使用action新增方法。 action 可以包含非同步操作，而且可以透過 action 來提交 mutations。 action有一個固有參數context，但是context 是state 的父級，包含state、getters

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類型的參數，（預設為當前頁地址）發送請求的位址。
  type: 要求為String類型的參數，請求方式（post或get）預設為get。
  data：規定要傳送到伺服器的資料。
  async：布林值，表示請求是否非同步處理。預設是 true。
  dataType: 要求為String類型的參數，預期伺服器傳回的資料類型。
  contentType：要求為String類型的參數，當傳送訊息至伺服器時，內容編碼類型預設為"application/x-www-form-urlencoded"。
  success：要求為Function類型的參數，請求成功後呼叫的回呼函數。
  error：Function類型的參數，請求失敗後呼叫的回呼函數。
  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' header is present on the requested resource. 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是Vue.js的插件，它可以透過XMLHttpRequest或JSONP發起請求並處理回應。 vue-resource體積小，支援主流瀏覽器。不過，vue2.0之後就不再更新了，尤大神推薦使用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 檔案裡面設定代理proxyTable:

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {    // 新增，解决跨域请求问题
      '/api': {
        target: 'http://192.168.1.103:8080/',
        changeOrigin: true,
        pathRewrite: {
          '`/api': '/'
        }
      },
      secure: false
    },
    
 target中写你想要请求数据的地址的域名

4、axios跨網域請求的問題

與vue-resource一樣，在vue項目下的config/index.js 檔案裡面設定代理proxyTable:

 dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {    // 新增，解决跨域请求问题
      '/api': {
        target: 'http://192.168.1.103:8080/',
        changeOrigin: true,
        pathRewrite: {
          '`/api': '/'
        }
      },
      secure: false
    },

不過vue-resource和axios這兩個方法，可能設定了代理proxyTable還是會報：No 'Access-Control-Allow-Origin' header is present on …的問題，這需要後端伺服器配合設定：

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

以上是axios非同步請求資料的使用（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！