移动端主页内容 part4 axios

时间:2021-01-15 18:01:56

vue中发送ajax有很多工具可用

浏览器自带的fetch

现在推荐:

axios第三方模块(vue中发送ajax)

特点:

跨平台的数据请求

  • 浏览器中xhr请求
  • node服务器中发送http请求

技巧:

一个首页中有五个组件。每个组件需要发送数据请求。那就是五个请求。那性能就很低

我们可以在根组件中发送一个请求 然后父子件传值 。

知识点static  整个项目中外部仅仅能直接访问这个文件夹内部的内容

作用:本地数据模拟 不提交到git仓库(gitignore 中写一下模拟数据文件地址即可)

使用步骤

1.安装

npm install axios --save

2.使用

home根组件中引入

import axios from ‘axios‘   //是否可以引入在项目入口文件

 

3.axios中url地址解决方案  

原因:本地模拟数据用的是本地模拟url

上线之前改动代码(修改url) 是非常不建议的

开发环境中如果有一个转发机制 把url中 api/index.json 文件的请求转发到我本地的mock文件夹下(就是static中模拟数据文件夹)

解决:vue中提供一个proxy代理功能

config文件中--- index.js   ----  

文件中有一个配置项目

module.export = {
   dev: {
  proxyTable:{
    ‘/api‘ : {
     target: ‘http://localhost:8080‘,
    pathRewrite: {
    ‘^/api‘: ‘/static/mock‘
}      
}
}
}   
}

当开发环境访问api时候 vue脚手架工具会帮我们替换地址(开发环境的转化)

相关文章