axios官网

一、解释

axios是一个基于promise的第三方数据请求库，可以用在浏览器（前端）和 node.js (后端) 中。

二、安装

下载：  npm install --save axios

三、使用

①在src文件夹下新建 api文件夹(封装数据请求的文件夹) util文件夹(工具文件夹)

②创建拦截器 在util下新建一个文件 (service.js) 写入如下内容

import axios from "axios"
// 创建axios实例
const service = axios.create({
    baseURL: "http://www.tianqiapi.com/api",
    timeout: 100000,  //设置超时时间
    headers: {
        "Content-Type": "application/json;charset=UTF-8",
        //"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",        
    }
});

// 添加请求拦截器
service.interceptors.request.use(function (config) {
   // 在发送请求之前做些什么
   //config.headers.Authorization = window.sessionStorage.getItem('token')
   //最后必须return config 这是固定写法
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么 (当正确的时候做一些操作)
    return response;
  }, function (error) {
    // 对响应错误做点什么
    switch(error.response.status) {
        case 404:
            alert('超时了')
        break;
        case 500:
            alert('内部服务器错误')
        break;
        default:
            alert('别请求了')
            break;
    }
    
    return Promise.reject(error);
  });


  export default service

③请求封装在api文件夹下创建一个文件 (index.js ) 用来容纳数据请求的封装

因为上面把axios给了service 所以需要先引入service

import service from "@/util/service.js"

// 开始封装数据请求
// get方法
export function GET(url, data) {
    return new Promise((resolve, reject) => {
        service.get(url, data)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err);
            })
            .catch((err) => {
                reject(err)
            })
    })
}

//POST方法
export function POST(url, data) {
    return new Promise((resolve, reject) => {
        service.post(url, data)
            .then(response => {
                if (!response.data) {
                    resolve(response);
                }
                resolve(response.data);
            }, err => {
                reject(err);
            })
            .catch((err) => {
                reject(err)
            })
    })
}

// delete方法
export function DELETE(url,id) {
    return new Promise((resolve, reject) => {
        service.delete(url+"/"+id)
            .then(res => {            
                if(!res.data){
                   resolve(res);
                }
                resolve(res.data);
             }, err => {
                 reject(err);
             })
             .catch((err) => {
                 reject(err)
             })
    })
}

④调用数据请求

比如我在book.js存放当前页面的所以请求

//book.js
import {GET,POST,DELETE} from "./index";
// 这个模块封装所有数据的相关操作（增删改查）

// 添加
export const addApi= data => POST("/books",data);

// 获取列表
export const getTianQiApi= ()=>GET("/?version=v9&appid=23035354&appsecret=8YvlPNrz");

// 删除
export const removeApi=bookid=>DELETE("/books",bookid);

⑤然后在你的组件中去用

<template>
  <div>
    home.vue
  </div>
</template>
<script>
import {getTianQiApi,getApi,removeApi} from "@/api/book.js";
export default{
    data(){
        return{}
    },
    mounted(){
        getTianQiApi().then(data=>{
            console.log("data添加成功",data);
        })
        .catch(err=>{
            console.log("错误",err);
         })
    },
    methods:{}
} 
</script>

⑥效果

 四、请求时遇到跨域问题了

①为何会跨域？

就是浏览器的安全机制 不同源 （不同端口 不同协议 不同域名）就会造成跨域

②解决跨域

1.jsonp

2.代理跨域

 · devServer代理跨域

(1) 需要在vue项目的根路径下创建一个vue.config.js的文件

(2) 写如下内容

module.exports={
    devServer:{
        proxy:{
            "/api":{
                // target:"你要解决跨域的地址",
                target:"http://www.tian.com.cn/",
                changeOrigin:true,
                pathRewrite:{
                    "^/api":""
                }
            }
        }
    }
}

( 3 ) 修改我们的请求路径为/api

export default {

        mounted( ) {

                  axios.get ( "/api/data/cityinfo/1012121.html " ).then( res => {

                              console.log( res)

                })

        }

}

( 4 ) 因为我们修改了配置文件 那么项目必须重启

· nginx反向代理

3.CORS（后端配合）