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

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

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

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

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指向就沒(méi)有問(wèn)題了
    const data = response.data
    if (data) {
      this.list = data
    }
  }).catch((error) => {
    console.log(error)
  })
}

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

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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

axios異步請(qǐng)求數(shù)據(jù)的簡(jiǎn)單使用

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

forsigner 2019-08-23 14:40 評(píng)論0 收藏0
Ajax詳解

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

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

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

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

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

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

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

Edison 2019-08-23 16:27 評(píng)論0 收藏0