vue使用axios調用接口

vue本身不支持ajax接口的請求，所以在vue中經常使用axios這個接口請求工具，這個axios也是vue官方推薦的庫。
axios的官方github： https://github.com/mzabriskie/axios

首先在自己的項目中新建一個request文件夾和utils文件夾。然后在目錄下創建這幾個文件

一、安裝axios

npm install axios --save

 

二、封裝axios 、配置request文件夾 config.js

export const baseURL = 'http://www.aistool.com' // 請求的url地址baseUrl

export const ERR_OK = '00000' // 請求成功校驗碼

export default {
  baseURL
}

三、配置utils文件夾 index.js

// 把獲取到的數據通過調用JSON.parse()方法轉換成對象
export const isJSON = s => {
  try {
    JSON.parse(s)
  } catch (e) {
    return false
  }
  return true
}

 四、配置http.js

import axios from 'axios'
import config from './config'
import { isJSON } from '../utils'

const instance = axios.create({
  baseURL: config.baseURL
})

instance.defaults.transformRequest = [
  function (data) {
    return data
  }
]
// 添加響應攔截器
instance.defaults.transformResponse = [
  function (data) {
    if (isJSON(data)) {
      return JSON.parse(data)
    }
    return data
  }
]

export default instance

五、在request文件夾下新建index.js，用於封裝get、post等請求

import http from './http'

// 封裝 get 請求 返回的是一個promise
export function get (url, params) {
  return new Promise((resolve, reject) => {
    http.get(url, { params }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}
// 封裝 post 請求 返回的是一個promise
export function post (url, params) {
  return new Promise((resolve, reject) => {
    http.post(url, JSON.stringify(params), {
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}
// 獲取輪播圖數據
export const getSwiper = data => get('/ftzs/adimg/rotation/list', data)

 六、在頁面中的使用

這里千萬要注意路徑的引用問題

在data()方法中配置getswiperList

 在mounted生命周期函數中調用這個方法

 在methods定義這個方法 到控制台查看打印內容

【參考鏈接】：

https://blog.csdn.net/fungleo/article/details/77601761

https://blog.csdn.net/qq779446849/article/details/53102925