vue中axios使用二:axios以post,get,jsonp的方式請求后台數據


本文為博主原創,轉載請注明出處

  axios在上一篇中講過:vue中axios使用一:axios做攔截器,axios是請求后台資源的模塊,用來請求后台資源。

  axios本身是支持get,post請求后台數據,示例如下:

post方式:

axios.post('/user', {
    firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

  get方式:

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) { console.log(error); });

  axios不支持jsonp的方式,在網上搜尋了很多的方式,找到一個可以使用jsonp在前端跨域請求的一個方法,特此記錄

    axios不支持jsonp,因為axios的作者覺得jsonp不太友好,推薦用CORS方式更為干凈,但是jsonp支持范圍更加廣闊一些,

  一些老式的IE瀏覽器也能支持,所以有些公司還是jsonp用的多些,那么如果要使用jsonp,可以獨立安裝

  npm i jsonp --save-dev 然后在頁面中引用import jsonp from 'jsonp',使用方式也是非常簡單的:

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM