vue axios访问接口

安装axios npm install axios --save
创建一个request.js文件在src下 对axios进行封装

代码

import axios from 'axios'
//
export function request(config) {
    const instance = axios.create({
    //请求的地址
        baseURL: "http://123.207.32.32:8000",
        timeout: 5000
    })
    // 请求拦截
    instance.interceptors.request.use(config => {
        return config
    }, err => {
        console, log(err)
    })
    //响应拦截
    instance.interceptors.response.use(res => {
        return res.data
    }, err => {
        console.log(err)
    })
    return instance(config)
}

获取请求直接引用当前问件

import {request} from "@/request.js"
//在methods中引用该方法获取请求
request需要传一个值可以为具体的地址也可以穿进一个对象

request('/data').then(res=>{
    console.log(res)
})
request({url:'/category',method"'get'}).then(res=>{
    console.log(res)
})

**当然也可以进一步封装 **

比如我要具体访问http://123.207.32.32:8000/home/data中的goods数据

我可以在写一个getShopList.js的文件来封装一个获取他的方法

import {request} from "@/request.js"
export function getHomeGoods() {
    return request({
        url: '/home/data',
    })
}

然后在组件中我们需要访问这个接口中的数据时我们就可以直接导入

<script>
import {getHomeGoods} from "@/getShopList.js"
    export default{
        data(){
            return{
                goodsList:[]
            }
        },
        methods: {
            getHomeGoods().then(res=>{
                this.goodsList=this.res.goodsList
            })
        }
    }
</script>

注释：本文章接口只为模拟，并不真实存在，大家可以根据自己的接口进行具体封装