vue本地設置請求接口及數據

1、安裝axios

yarn add axios

2、在入口文件main.js中設置

import { getRequest, postRequest} from './libs/api';//導入
Vue.prototype.getRequest = getRequest;//注入到vue對象
Vue.prototype.postRequest = postRequest;//注入到vue對象

 3、創建api接口

 　1：src目錄下創建libs文件夾

　 2：在libs文件夾中創建api.js接口文件

import axios from 'axios'

// 統一請求路徑前綴
let base = ''
// let base = 'http://localhost:60155';

export const getRequest = (url, params) => {
  // let accessToken = getStore('accessToken');
  return axios({
    method: 'get',
    url: `${base}${url}`,
    params: params
    // headers: {
    //     'accessToken': accessToken
    // }
  })
}

export const postRequest = (url, params) => {
  // let accessToken = getStore("accessToken");
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
      // 'accessToken': accessToken
    }
  })
}
//  Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
// 引用axios
//  聲明導出接口getRequest函數
// 傳入url params參數
// 聲明get/post 賦值url 和params

4、在vue文件中的created中調用接口

created: function () {
     
    // 請求數據賦值
    this.getRequest('/static/static1.json').then(res => {
      console.log(res)
      //   賦值
      this.remindlist = res.data.Todayplanset
    })
  }

注意請求的“/static/staric1.json”的路徑，這個文件放在public文件夾中（public默認為根目錄  報404為路徑問題）

最后請求完成 返回的json數據