1.配置vue.config.js
```
module.exports = {
devServer: {
port: 8003
}
}
```
npm run serve
```
2.https://cnodejs.org/api/v1/topics
```
3.下載包axios
```
npm i axios -S
```
4.創建文件axios.vue
```
<template>
<div>axios發送請求</div>
</template>
<script>
import axios from 'axios'
export default {
created(){
axios.get('https://cnodejs.org/api/v1/topics')//params:{}
.then((result)=>{
console.log(result)
})
.catch((error)=>{
console.log(error)
})
}
}
</script>
<style>
</style>
```
5.在app.vue引入組件 reuslt.data.data.
6.如果沒有數據返回可能是跨域 CORS
7.解決跨域問題 設置代理 vue.config.js
```
module.exports = {
devServer: {
port: 8003,
proxy: {
'/api': {
target: 'https://cnodejs.org' //：8080
}
}
}
}
```
```
import axios from 'axios'
export default {
name : 'MyConent',
data(){
return{
arr :[]
}
},
created(){
axios.get('/api/v1/topics')//params:{}
.then((result)=>{
// console.log(result.data)
this.arr = result.data.data;
console.log(this.arr);
})
.catch((error)=>{
console.log(error)
})
}
}
```
8.封裝axios請求
在src下新建文件夾request,新建文件api.js
```
import axios from 'axios'
export const request = data => axios.get('/api/v1/topics')
// const request = data => axios.get('/api/v1/topics',{params:data})
```
```
把原來的改成
// import axios from 'axios'
import {request} from '../request/api'
export default {
name : 'MyConent',
data(){
return{
arr :[]
}
},
created(){
request()//params:{}
.then((result)=>{
// console.log(result.data)
this.arr = result.data.data;
console.log(this.arr);
})
.catch((error)=>{
console.log(error)
})
}
}
```
9.封裝攔截器
在文件夾request,新建文件request.js 目的 封裝axios
```
import axios from 'axios'
import { Promise } from 'core-js';
const instance = axios.create({
timeout: 10000
})
instance.interceptors.request.use(config => {
console.log(config)
//數據處理 (json,fromdata)
return config;
//驗證token
//config.params.token = 123
}, err => {
return new Promise.reject(err);
})
instance.interceptors.response.use(result => {
console.log(result)
return result;
}, err => {
return new Promise.reject(err);
})
export default instance
```
10.修改api.js文件
```
// import axios from 'axios'
import request from './request'
export const getRest = () => request.get('/api/v1/topics')
// const request = data => axios.get('/api/v1/topics',{params:data})
```
