Vue axios的使用

忘是亡心i 2024-03-03 06:55 39阅读 0赞

<template>
        <div>
            <div v-if="!repositoryUrl">loading...</div>
            <div v-else>most star repository is <a :href="repositoryUrl" rel="external nofollow"  rel="external nofollow" >{
        {
        repositoryName}}</a></div>
        </div>
        
    </template>
    
    <script>
        import axios from 'axios';
        
        export default {
        
            data() {
        
                return {
        
                    repositoryUrl : '',
                    repositoryName : ''
                }
            },
            
            mounted() {
        
                // 发ajax请求，用以获取数据，此处地址意思是查询 github中 vue 星数最高的项目
                const url = 'https://api.github.com/search/repositories?q=vue&sort=stars';
                
                axios.get(url).then(
                    response => {
        
                        const result = response.data.items[0];
                        console.log(result)
                        this.repositoryUrl = result.html_url;
                        this.repositoryName = result.name;
                    }
                ).catch(
                    response => {
        
                        alert('请求失败');
                    },
                );
            }
        }
    </script>
    
    <style>
    
    </style>

post使用

const url = '/api/v1/web3/url/list_by_category';
    
    let data = {
        "category":"tools"};
    
    axios.post(url,data).then(
      response => {
        
        const result = response.data.data;
        console.log(result)
        this.repositoryName = result.name;
        this.web3_urls = result
    
    
      }).catch(response => {
        
        alert('请求失败');
      },
      );

发表评论取消回复

表情：

评论列表（有 0 条评论，39人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中使用axios

\Axios是什么？ 1.支持Promiss API 2.拦截请求和响应 3.转换请求数据和响应数据 4.取消请求 5.自动转换json数据 6....

素颜马尾好姑娘i/ 2024年04月17日 18:58/ 0 赞/ 5 阅读

相关 Vue axios的使用

<template> <div> <div v-if="!repositoryUrl">loading...</div>

忘是亡心i/ 2024年03月03日 06:55/ 0 赞/ 40 阅读

相关 VUE使用axios

1，npm一下 npm install vue-axios --save npm install qs.js --save　　//这一步可以先忽略，它的作用是

雨点打透心脏的1/2处/ 2022年12月12日 13:53/ 0 赞/ 107 阅读

相关 vue之axios使用

一、安装 1、利用npm安装`npm install axios --save` 2、利用bower安装`bower install axios --save`

雨点打透心脏的1/2处/ 2022年06月13日 00:14/ 0 赞/ 215 阅读

相关 axios + webpack + vue。 axios基本使用

目的：在wepack+vue 项目中使用 axios 第一步：安装 cnpm i axios -S 第二步：导入 2-1导入：import axi

Dear 丶/ 2022年05月14日 09:20/ 0 赞/ 256 阅读

相关 vue.js axios的使用

首先安装：npm install axios --save vue源码： <script> import axios from '@/axios'

怼烎@/ 2022年04月25日 02:26/ 0 赞/ 192 阅读

相关 Vue使用axios、解决axios跨域

axios [axios文档][axios] > axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端从浏览器中创建 XML

骑猪看日落/ 2022年03月06日 10:38/ 0 赞/ 571 阅读

相关 vue全局使用axios的方法

在vue项目开发中，我们使用axios进行ajax请求，很多人一开始使用axios的方式，会当成vue-resoure的使用方式来用，即在主入口文件引入import VueRe

蔚落/ 2022年02月04日 10:49/ 0 赞/ 277 阅读

相关 vue 全局使用 axios

vue 全局使用 axios，可以直接在 main.js 中引入 axios；也可以对 axios 进行封装，封装之后再引入到 main.js 中。总之要想全局使用，就得引入到

水深无声/ 2022年01月26日 14:25/ 0 赞/ 547 阅读

相关 axios在vue中的使用

目录一视频二教程三源码四服务端代码结构 1 接口文档.xlsx 2 router.js 五启动并测试服务端六安装yarn 七安装van

我就是我/ 2021年07月24日 22:30/ 0 赞/ 448 阅读