關(guān)于axios以及jsonp的簡單使用方法

ARGUS 發(fā)布于2019-08-20 18:35 / 1428人閱讀

摘要：前端框架作者推薦使用進(jìn)行數(shù)據(jù)請求，的使用方法非常簡單，最近在使用碰到個小問題，于是記錄一下如果是管理前端項目的話，直接安裝就好，如果不是，那么直接引用就行了使用的時候在頁面的中引入，下面是的函數(shù)式寫法這里使用箭頭函數(shù)，那么下面的指向就

vuejs前端框架作者推薦使用axios進(jìn)行數(shù)據(jù)請求，axios的使用方法非常簡單，最近在使用vuejs碰到個小問題，于是記錄一下：
1.如果是npm管理前端項目的話，直接npm i axios --save-dev安裝就好，如果不是，那么直接引用就行了
使用的時候在頁面的script中import axios from "axios"引入，下面是es6的函數(shù)式寫法

getList: function (page, limit) {
  axios.get("/api/v1/topics", {
    params: {
      page: this.page || 1,
      tab: this.tab,
      limit: this.limit || 20
    }
  }).then((response) => {//這里使用箭頭函數(shù)，那么下面的this指向就沒有問題了
    const data = response.data
    if (data) {
      this.list = data
    }
  }).catch((error) => {
    console.log(error)
  })
}

2.axios不支持jsonp，因為axios的作者覺得jsonp不太友好，推薦用CORS方式更為干凈，但是jsonp支持范圍更加廣闊一些，一些老式的IE瀏覽器也能支持，所以有些公司還是jsonp用的多些，那么如果要使用jsonp,可以獨立安裝
npm i jsonp --save-dev 然后在頁面中引用import jsonp from "jsonp"，使用方式也是非常簡單的:

getList: function () {
 jsonp(config.ajaxUrl + "路徑", null, (err, data) => {
   if (err) {
     console.error(err.message);
   } else {
     if (data.list.length > 0) {
       data.list.map((item) => this.list.push(item))
       console.log(data);
     }
   }
 })
}

GPU云服務(wù)器云服務(wù)器關(guān)于jdk的使用關(guān)于宏的使用關(guān)于使用linux的相關(guān)軟件關(guān)于ecs云服務(wù)器的使用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/84735.html

相關(guān)文章

axios異步請求數(shù)據(jù)的簡單使用

摘要：使用模擬好后端數(shù)據(jù)之后模擬數(shù)據(jù)的使用參考，就需要嘗試請求加載數(shù)據(jù)了。數(shù)據(jù)請求選擇了，現(xiàn)在都推薦使用。規(guī)定要發(fā)送到服務(wù)器的數(shù)據(jù)。布爾值，表示請求是否異步處理。要求為類型的參數(shù)，請求成功后調(diào)用的回調(diào)函數(shù)。在一個中重寫回調(diào)函數(shù)的字符串。使用Mock模擬好后端數(shù)據(jù)之后（Mock模擬數(shù)據(jù)的使用參考：https://segmentfault.com/a/11...），就需要嘗試請求加載數(shù)據(jù)了。數(shù)...

forsigner 2019-08-23 14:40 評論0 收藏0
Ajax詳解

摘要：當(dāng)請求完成后注冊一個回調(diào)函數(shù)。該請求是否觸發(fā)全局處理事件如等，請求發(fā)送前的回調(diào)函數(shù)，用來修改請求發(fā)送前，此功能可用來設(shè)置自定義頭信息，在函數(shù)中返回將取消這個請求。例如，為請求指定一個回調(diào)函數(shù)名。即改變回調(diào)函數(shù)的，默認(rèn)就是傳入的整個對象。 Ajax Ajax 全稱是 asynchronous javascript and xml，并不是新的編程語言，可以說是已有技術(shù)的組合，主要用來實現(xiàn)客...

jokester 2019-08-23 14:15 評論0 收藏0
關(guān)于跨域

摘要：服務(wù)端接收到請求后，通過該參數(shù)獲得回調(diào)函數(shù)名，并將數(shù)據(jù)放在參數(shù)中將其返回收到結(jié)果后因為是標(biāo)簽，所以瀏覽器會當(dāng)做是腳本進(jìn)行運行，從而達(dá)到跨域獲取數(shù)據(jù)的目的。在使用Vue搭建的一個后端管理系統(tǒng)中，我使用axios請求本地的Node環(huán)境下的接口，但是請求失敗，然后我錯誤信息是：showImg(https://segmentfault.com/img/remote/1460000018521...

AlexTuan 2019-08-23 15:56 評論0 收藏0
雜篇 - Vue豆瓣系列文章

摘要：起初，項目使用的是，其提供的方法用著比較爽，由于項目的很多數(shù)據(jù)來自豆瓣的，直接上簡單方便，跨域什么的不考慮?？缬騿栴}，上面已經(jīng)介紹，在不能操控的豆瓣數(shù)據(jù)上，使用的是。項目地址在線演示不識廬山真面目，只緣身在此山中。大概一個月前，開源了Vue重構(gòu)豆瓣移動端的項目，效果還可以，收到了很多小伙伴的反饋，話說是要寫一些文章的，但遲遲沒有動筆，估計小伙伴們等的花都謝了，拖延癥是病，需要治...

lijinke666 2019-08-20 16:53 評論0 收藏0
全面分析前端的網(wǎng)絡(luò)請求方式

摘要：請求默認(rèn)會攜帶同源請求的，而跨域請求則不會攜帶，設(shè)置的的屬性為將允許攜帶跨域。類型請求成功后的回調(diào)函數(shù)。另外，同樣提供了在環(huán)境下的支持，可謂是網(wǎng)絡(luò)請求的首選方案。當(dāng)網(wǎng)絡(luò)故障時或請求被阻止時，才會標(biāo)記為，如跨域不存在，網(wǎng)絡(luò)異常等會觸發(fā)。一、前端進(jìn)行網(wǎng)絡(luò)請求的關(guān)注點大多數(shù)情況下，在前端發(fā)起一個網(wǎng)絡(luò)請求我們只需關(guān)注下面幾點：傳入基本參數(shù)（url，請求方式）請求參數(shù)、請求參數(shù)類型設(shè)...

Edison 2019-08-23 16:27 評論0 收藏0