Vue.js Ajax

Posted 2020-11-30 ---空白---

1.封装AJAX模块

(1)在src目录下新建api目录，新建ajax.js，写入
(2)引入axios
(3)定义ajax函数，并暴漏出去
(4)ajax函数中调用axios发送请求，并将返回的promise对象 return出去

// 引入axios
import axios from 'axios'

// 暴露ajax
// ajax接收3个参数：url，参数，请求方法
export default function ajax (url='',data={},type='get') {
    let promise
    if(type.toLowerCase() === 'get'){
        //如果是get请求，则将参数拼接到url后面
        let dataStr = ''
        Object.keys(data).forEach(key => {
            // key=value&
            dataStr += key + '=' +data[key] + '&'
        })
        if(dataStr !== ''){
            // 去除最后一个&
            dataStr = dataStr.substring(0,dataStr.lastIndexOf('&'))
            // 将参数拼接到url后面
            url = url + '?' + dataStr
        }
        // 发送get请求，返回一个promise对象
        promise = axios.get(url)
    }else {
        // 发送post请求，返回一个promise对象
        promise = axios.post(url,data)
    }
    // 将promise返回
    return promise
}

(5)引入该模块并使用

// App.vue
<script>
import ajax from './api/ajax.js'

export default {
  mounted () {
    const url = 'https://api.github.com/search/repositories'
    ajax(url,{q:'vue',sort:'stars'}).then(res => {
      console.log(res.data.items[0])
    }).catch(error => {
        alert('请求失败')
    })
  }
}
</script>

2.配置代理解决跨域问题

打开config/index.js文件，找到proxyTable属性进行

proxyTable: {
    '/api': {  // 匹配以/api开头的所有路径
        target: 'http://localhost:4000', // 代理的后端api基础路径
        changeOrigin: true, // 支持跨域
        pathRewrite: { // 重写路径，去掉路径中开头的'/api'
            '^/api': ''
            // '^/api': 'api' 
        }
    }
}

如果要访问后台api地址,例如：http://localhost:4000/List

axios.get('/api/List') // 会 自动替换成 http://localhost:4000/List

如果配置成这样:

pathRewrite: {
    '^/api': 'api'
}

访问后台地址就应该是 http://localhost:4000/api/List