vue項目實踐-添加axios封裝api請求

標籤：時間   function   提交   模組   方法   head   data   添加   creat   

安裝 axios

npm install axios --save

建立執行個體 (utils/fetch.js)

axios 預設提交格式為：application/json
可使用 qs 模組(需要安裝)轉換後提交格式為 application/x-www-form-urlencoded
通過設定 transformRequest 屬性 data => qs.stringify(data) 可以正常表單形式提交

import axios from 'axios'const instance = axios.create({  baseURL: 'apiBaseUrl', // api的base_url  timeout: 10000 // 請求逾時時間  // transformRequest: data => qs.stringify(data) //})// request攔截器instance.interceptors.request.use(  e => {    e.params = e.params || {}    e.headers = e.headers || {}    //set 預設值    return e  },  error => ({ status: 0, msg: error.message }))// respone攔截器instance.interceptors.response.use(  response => {    const resp = response.data    if (response.status === 200) {      return resp    }    return resp  },  error => {    console.log('err' + error) // for debug    return Promise.reject(error)  })export default instance

將 api 請求封裝到 api 檔案夾下

在 api 檔案中建立介面模組並使用 axios 執行個體(utils/fetch.js)
src/api/api_test.js

import request from '@/utils/fetch'export function test(data) {  return request({    url: '/test',    method: 'post',    data: data  })}

使用的時候，可通過引入 api/模組.js 調用方法，也可以通過安裝外掛程式的形式將 api 介面擴充到 vue 執行個體中，使其可以更方便的在項目中使用

以 test 模組為例建立一個$api 擴充

src/api/index.js

import * as api_test from './test'const apiObj = {  api_test}const install = function(Vue) {  if (install.installed) return  install.installed = true  Object.defineProperties(Vue.prototype, {    $api: {      get() {        return apiObj      }    }  })}export default {  install}

在 main.js 安裝 $api 擴充:

import api from './api'Vue.use(api)

在項目中調用：this.$api.api_test.test().then(resp=>{...}).catch(()=>{...})

vue項目實踐-添加axios封裝api請求