vue-cli 项目添加Axios，请求接口

淩亂°似流年 2022-12-17 13:53 217阅读 0赞

# 进入vue-cli4创建后的项目 #

# 安装axios #

npm install -s axios

# 创建axios实例及请求拦截 #

*  src下创建一个文件夹api，在这个文件夹下创建http.js(放axios实例)，interface.js(放接口)

![image.png][]

*  http.js 创建实例代码如下：

import axios from 'axios'
    // 创建axios实例
    const service = axios.create({ 
      // baseURL: baseUrl, // api 的 base_url
      baseURL: 'https://www.superwbs.com', // api 的 base_url
      timeout: 300000 // 请求超时时间
    })
    // request 拦截器
    service.interceptors.request.use(
      config => { 
        return config
      },
      error => { 
        console.log(error) // for debug
        Promise.reject(error)
      }
    )
    // response 拦截器
    service.interceptors.response.use(
      response => { 
        return response.data
      },
      error => { 
        console.log('err' + error) // for debug
        return Promise.reject(error)
      }
    )
    export default service

*  interface.js 接口文件代码示例如下：

import request from './http' // 使用实例
    export function contentDetail(params) { 
      return request({ 
        url: '/superwbs-server/tech/contentDetail',
        method: 'get',
        params
      })
    }

# 在About页面，使用该接口 #

*  在src/views/About.vue代码，里面引入接口文件interface.js，及引入需要的接口方法名称。
 *  About.vue 代码修改如下:

<template>
      <div class="about">
        <h1>This is an about page</h1>
      </div>
    </template>
    
    <script> import { contentDetail } from '@/api/interface' // 引入接口 export default { data(){ return { }; }, created(){ this.getData(); }, methods:{ getData(){ let postData = { id:35} // 请求参数 contentDetail(postData).then(data => { console.log(data); }) }, } } </script>

[image.png]: /images/20221122/10d0c76b21ac43a4aee84084a0d53eea.png