Vue数据请求方式

Vue数据请求方式

vue请求方式介绍

vue中有三种请求方式

js原生fetch

js封装的ajax

Vue中axios

axios

1、需要在npmjs.com中找到相应介绍并学习，下面有一些基本的介绍

​ axios是XMLHTTPRequest 对象

​ axios底层是Node.js的http模块

​ axios也是Promise

​ axios对数据进行了封装

​ axios可以防止 XSRF 脚本攻击

对浏览器的支持：

除ie需要在11版本以上支持外，其他都可以

静态数据请求

静态请求都是GET请求，我们引入axios后，就会得到一个axios对象

 methods: 
 //静态请求的两种方法
            getStatic () {
   
                // axios.get(url,options)
                .then( res => console.log( res ))
                .catch(err => console.log( err ))


                axios({
   
                    url: './mock/data.json',
                    method: 'GET'
                }).then( res => console.log( res ))
                  .catch( err => console.log( err ))   

            }

动态接口

在这里用的是nodejs中express脚手架来生成动态接口

在routes中写 路由

const express = require( 'express' )
const router = express.Router()

router.route('/shop')
    .get((req,res,next) => {
   
        console.log( 'get', req.query )
        res.