前端
首发于前端
Vue非最佳实践 - axios进行Ajax的小技巧

Vue非最佳实践 - axios进行Ajax的小技巧

这是一篇日记性质的博文,记录了我今天写东西遇到的问题及其解决。

概要:这是一个家教网站的手机版,今天要实现家教列表的功能。

使用axios时解决了:

  1. 跨域请求
  2. response以小红点('\ufeff')开头
  3. 美化代码~~~

三个问题

一、跨域请求

我在webpack的develop模式下进行调试,我们的后台在Apache上,接口为http://127.0.0.1/teacherList.php ,但是我们的前端在http://127.0.0.1:8080

所以属于跨域请求。

需要在teacherList.php中加上

header('Access-Control-Allow-Origin: http://localhost:8080');

响应头。

注意:http://127.0.0.1http://localhost也属于跨域请求

二、使用axios

① 运行npm install axios --save

② Main.js中加入如下代码

import axios from 'axios'
Vue.prototype.axios = axios

③TeacherList.vue组件中:

<template></template>
<script>
  export default {
    /*...*/
    data(){
      return{
        teachers:[]
      }
    },
    mounted(){
      const that = this
      this.axios.get('http://127.0.0.1/teacherList.php?page=1').then(res=>{
        console.log(res.data = JSON.parse(res.data))
        res.data.forEach(item=>{
          that.teachers.push(item)
        }).catch(err=>{console.log(err)})
      })
    }
  }
</script>

二、response以小红点('\ufeff')开头

测试时发现错误,明明文本是正常的,可是JSON.parse()函数还是报错:

Uncaught (in promise) SyntaxError: Unexpected token in JSON at position 2

这就很奇怪了,打开控制台“Network”窗口:

Chrome的Preview也没有问题。

再看Response:

莫名其妙多了一个小红点。。。

查了一下是因为PHP文件的编码格式导致的。

要把用到的的PHP文件和include()的文件都转为UTF-8无BOM格式,可以使用NotePad++转哦~

三、代码美化

作为一个超级无敌强迫症。

<template></template>
<script>
  let getTeacherListConfig = {
    url: bus.host + '/teacherList.php',
    method: 'get',
    params: {
      page: 1,
      site: bus.site
    }
  }
  export default {
    /*...*/
    data(){
      return{
        teachers:[]
      }
    },
    methods:{
      //响应处理函数
      handleTeacherList(res){
        res.data.forEach(item=>this.teachers.push(item))
      }
     //错误处理
     handleError(err){
       /*...*/
     }
    },
    mounted(){
      this.axios(getTeacherListConfig)
        .then(handleTeacherList).catch(handleError)
    }
  }
</script>

后面这个,去掉了const that = this这样的神经病语句,并且使用axios的config来进行Ajax,把流程处理的更加清楚了。


就今天就干了就这点活~如果您看完了,谢谢您的观看。。。

编辑于 2018-03-19

文章被以下专栏收录